CSS hover effect (Farbe in NAV ändert sich beim mouseover) funktioniert in MAC OS X 10.6.8 nicht mehr.

dolphinlady · 7. April 2013

Hi,
der CSS hover effect z.B. in der Navigation (Farbänderung bei mouseover) funktioniert in MAC OS X 10.6.8 nicht mehr.

HTML:
<!DOCTYPE html>

<title>Forum für Bewegung Startseite</title>
<link href="/Users/f_farthing/Desktop/Forum/stylesheet2.css" type="text/css" rel="stylesheet" />

<script>
// Javascript originally by Patrick Griffiths and Dan Webb.
// http://htmldog.com/articles/suckerfish/dropdowns/
sfHover = function() {
var sfEls = document.getElementById("navbar").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls.onmouseover=function() {
this.className+=" hover";
}
sfEls.onmouseout=function() {
this.className=this.className.replace(new RegExp(" hover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
</head>
<body>

<div id="header">
<header>
<p id="logotext">
<strong>Willkommen im Forum für Bewegung</strong>
</p>
</header>
</div>

<nav id="steuerungoben">
<ul>
<li><a href="index.html">Startseite</a></li>
<li><a href="aktuell.html"> Aktuelles</a></li>
<li><a href="kursplan_und_preise.html">Kursplan & Preise</a></li>
<li><a href="ueber_uns.html">Über uns</a></li>
<li><a href="eindruecke.html">Eindrücke</a></li>
<li><a href="presse.html">Presse</a></li>
</ul>
</nav>
<div id="wrapper">

<div id="box1">
<img src="/Users/f_farthing/Desktop/Forum/Bilder/bewegung.jpg" width="99" height="99" alt="Indoor Cycling"/>
<ul class="navbar">
<li><a href="bewegung.html">BEWEGUNG</a>
<ul>
<li><a href="bewegung_fuer_erwachsene.html">für Erwachsene</a></li>
<li><a href="bewegung_fuer_kinder.html">für Kinder</a></li>
<li><a href="bewegung_fuer_senioren.html">für Senioren</a></li>
<li><a href="bewegung_fuer_schwangere.html">für Schwangere und junge Mütter</a></li>
</ul>
</li>
</ul>
</div>
<div id="box2">
<img src="/Users/f_farthing/Desktop/Forum/Bilder/tanz.jpg" width="99" height="99" alt="Tanz und Musik"/>
<ul class="navbar">
<li><a href="musik.html">MUSIK & TANZ</a>
<ul>
<li><a href="tanz_fuer_erwachsene.html">für Erwachsene</a></li>
<li><a href="tanz_fuer_kinder.html">für Kinder</a></li>
<li><a href="tanz_fuer_senioren.html">für Senioren</a></li>
<li><a href="tanz_fuer_schwangere.html">für Schwangere und junge Mütter</a></li>
</ul>
</li>
</ul>
</div>
<div id="box3">
<img src="/Users/f_farthing/Desktop/Forum/Bilder/lernfoerderung.jpg" width="99" height="99" alt="Lernförderung">
<ul class="navbar">
<li><a href="lernfoerderung.html">LERNFÖRDERUNG</a>
<ul>
<li><a href="lernfoerderung.html">für Kinder</a></li>
</ul>
</li>
</ul>
</div>
<div id="box4">
<img src="/Users/f_farthing/Desktop/Forum/Bilder/ernaehrung.jpg" width="99" height="99" alt="Ernährung"/>
<ul class="navbar">
<li><a href="ernaehrung.html">ERNÄHRUNG</a>
<ul>
<li><a href="ernaehrung.html">für Jedermann</a></li>
</ul>
</li>
</ul>
</div>
<div id="box5">
<img src="/Users/f_farthing/Desktop/Forum/Bilder/entspannung.jpg" width="99" height="99" alt="Entspannung"/>
<ul class="navbar">
<li><a href="entspannung.html">ENTSPANNUNG</a>
<ul>
<li><a href="entspannung.html">für Jedermann</a></li>
</ul>
</li>
</ul>
</div>
<div id="box6">
<img src="/Users/f_farthing/Desktop/Forum/Bilder/kinderparty.jpg" width="99" height="99" alt="Kinderparty"/>
<ul class="navbar">
<li><a href="spezielles.html">SPEZIELLES</a>
<ul>
<li><a href="kinderparty.html">Kinderparty</a></li>
<li><a href="geburtsvorbereitung.html">Geburtsvorbereitung</a></li>
<li><a href="familienfitness.html">Familienfitness</a></li>
</ul>
</li>
</ul>
</div>

<div id="box7">
<p>Achtung! Gesundheit ist ansteckend...!</p>
</div>

<div id="box8">
<p>In meinem Forum für Bewegung steht der Mensch - die Person - seine Persönlichkeit im Mittelpunkt. Die individuelle Betreuung...
<a href="/Users/f_farthing/Desktop/Forum/ueber_uns.html">Über uns</a>
</p>
</div>
<div id="box9">
<p> Das FORUM für BEWEGUNG bietet „rund um den Menschen“ ein bewegendes Programm:
... von „klein“ bis „groß“ - von „jung“ bis „antik“ gibt es Kurse, Workshops und Vorträge;
außerdem Kindergeburtstage, einen Haus-Shop und eine Gesundheitsvorsorgepraxis zur Entspannung, Stressabbau und „Energie-Tanken“ mit Massagen, Touch for health, Lichtduschen u.v.m. Bei Interesse klicken Sie auf eines der oben aufgelisteten Themen. Wir hoffen, Sie werden fündig und wir lernen Sie bald persönlich kennen...!</p>

</div>
</section>

<footer>
<nav id="steuerungunten">
<ul>
<li><a href="kontakt.html">Kontakt</a></li>
<li><a href="impressum.html">Impressum</a></li>
<li><a href="agb">AGB</a></li>
</ul>
<p>© 2013 - www.corinna-nordmann.de</p>
</nav>

</footer>

</div>
</body>
</html>

CSS:* {
padding: 0;
margin: 0;
webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

html{
width: 100%;
height: 100%;
}

body {
font-family: arial, sans-serif;
background-color: #FFD39B;
padding-bottom: 50px;
margin: 20px 200px;
}

header, nav, footer, aside, section {
display: block;
}

#wrapper {
margin: 0 auto;
margin-bottom: 80px;
min-height: 100%;
background-color: #FFB573;
background: url(/Users/f_farthing/Desktop/Forum/logogross.png) center center no-repeat;
border: 3px solid grey;
}

#wrapper p {
padding-bottom: 1em;
}

#wrapper img {
border-radius: 45px;
}
header {
height:100px;
background-color: #FFA42A;
border: 3px solid grey;
border-radius: 30px 30px 0 0;
box-shadow: -5px -5px silver;
}

header p {
text-align: center;
}

header a {
color: white;
}
#logotext {
padding-top: 30px;
color: white;
font-size: 30px;
}

#steuerungoben {
background-color: silver;
height: 50px;
border-left: 3px solid grey;
border-right: 3px solid grey;
box-shadow: -5px -0px silver;
}

#steuerungoben ul{
list-style-type: none;
}

#steuerungoben li{
display: inline;
}

#steuerungoben a {
line-height:50px;
width: 175px;
float: left;
text-align: center;
color: white;
text-decoration: none;
display: block;
}
#steuerungoben a:hover {
background-color: grey;
}

/* section {
min-height: 100%;
}*/

/* section p {
padding-bottom: 1em;
}

section img {
border-radius: 45px;
}*/
.navbar {
margin: 0;
padding: 0;
height: 1em;
}

.navbar li {
list-style: none;
float: left;
}

.navbar li a {
display: block;
padding: 3px 8px;
background-color: #FFB573;
color: white;
text-decoration: none;
}

.navbar li ul {
display: none;
width: 10em;
background-color: #FF9A40;
}

.navbar li:hover ul, .navbar li.hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0;
}

.navbar li:hover li, .navbar li.hover li {
float: none;
}

.navbar li:hover li a, .navbar li.hover li a{
background-color: #FFB573;
border-bottom: 1px solid #fff;
color: #000;
}

.navbar li li a:hover {
background-color: #FF9273;
}

.grow img{
position: absolute;
top: 520px;
bottom: 440px;
left: 41%;
right: 59%;
border: 1px solid silver;
float: left;
height: 170px;
width: 170px;
margin: 1px;
overflow: hidden;
-webkit-box-shadow: 5px 5px 5px silver;
box-shadow: 5px 5px 5px silver;
}
.grow img {
height: 170px;
width: 170px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}

.grow img:hover {
width: 180px;
height: 180px;
}

#box1 {
position: absolute;
top: 580px;
left: 320px;
-webkit-box-shadow: 5px 5px 5px silver;
box-shadow: 5px 5px 5px silver;
border: 1px solid silver;
}

#box2 {
position: absolute;
top: 500px;
left: 340px;
-webkit-box-shadow: 5px 5px 5px silver;
box-shadow: 5px 5px 5px silver;
border: 1px solid silver;

}

/* #box3 {
position: absolute;
top: 225px;
left: 460px;
-webkit-box-shadow: 5px 5px 5px silver;
box-shadow: 5px 5px 5px silver;
border: 1px solid silver;
}

#box4 {
position: absolute;
top: 185px;
left: 635px;
-webkit-box-shadow: 5px 5px 5px silver;
box-shadow: 5px 5px 5px silver;
border: 1px solid silver;
}

#box5 {
position: absolute;
top: 225px;
left: 770px;
-webkit-box-shadow: 5px 5px 5px silver;
box-shadow: 5px 5px 5px silver;
border: 1px solid silver;
}

#box6 {
position: absolute;
top: 370px;
left: 880px;
-webkit-box-shadow: 5px 5px 5px silver;
box-shadow: 5px 5px 5px silver;
border: 1px solid silver;
}

#box7 {
position: absolute;
top: 280px;
left: 250px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
}
#box8 {
position: absolute;
top: 880px;
left: 250px;
}

#box9 {
position: absolute;
top: 580px;
left: 900px;
right: 250px;
color: white;
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
}*/
#footer {
position: absolute;
bottom: 0px;
width: 100%;
}
#steuerungunten {
border-top: 3px solid grey;
background-color: silver;
height: 50px;
/* zoom:1;*/
}

#steuerungunten ul{
list-style-type: none;
}

#steuerungunten li{
display: inline;
}

#steuerungunten a {
line-height:50px;
width: 175px;
display: block;
float: left;
text-align: center;
color: white;
text-decoration: none;
}
#steuerungunten a:hover {
background-color: grey;
}

#steuerungunten p {
color: white;
text-align: right;
line-height: 50px;
}

Lustiger Weise hat es bis vor ca. einer Woche funktioniert. Ich kann keinen Grund finden, warum es nicht mehr klappt.
Könnt Ihr mir weiterhelfen.

Ich bin ein absoluter Frischling und freu mich über jede Hilfe und Kritik.

Gruß
dolphinlady

unkown-6363 · 8. April 2013

Hallo.
Zwecks besserer Übersicht ...

Code

[code=html]Hier schreibe ich im Forum HTML-Code hinein

[/code]

Code

[code=css]hier schreibe ich im forum css-code hinein

[/code]
Bitte editiere deinen Beitrag dahingehend

CSS hover effect (Farbe in NAV ändert sich beim mouseover) funktioniert in MAC OS X 10.6.8 nicht mehr.

Jetzt mitmachen!

Teilen