[Party]

Hi leute hab dieses CSS menü gebastelt es besteht aus 2 bilder links mitte rechts. jetzt möchte ich wenn man mit der mouse drüber fehrt das sich das bild bei allen 3 ändert... wie stell ich das am besten an bei mir funktionierts leider nicht unten ist der CODE.

Vielen dank für eure bemühung

<style type="text/css">
#navigation {
text-align: center;
float: right; /*Set to "left" or "right" to position menu accordingly*/
/*border-bottom: 1px solid #999e87; uncomment this line to add bottom border*/
}
#navigation ul {
font-family: Verdana;
font-size: 12px;
font-weight: bold;
text-decoration: none;
margin: 0;
padding: 0;
list-style:none; 
}
#navigation li {
display: inline;
background: url(greenbg.gif) repeat-x center top;
text-align: center;
padding: 0;
margin-right: 4px; 
float: left;
}
#navigation a {
color: #663300;
background: url(greenleft.gif) no-repeat left top;
float: left;
margin: 0;
padding-left:7px;
text-decoration: none;
}
#navigation a span {
background: url(greenright.gif) no-repeat right top;
display: block;
padding:7px 13px 4px 5px;
}
#navigation a span {
float: none;
}

#navigation li a:hover, #navigation li a:active{
color: white;
background: transparent url(ba.gif) center center repeat-x;
}
</style>


<div id="navigation">
<ul>
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>CSS Examples</span></a></li>
<li><a href="#"><span>Forums</span></a></li>
<li><a href="#"><span>Webmaster Tools</span></a></li>
<li><a href="#"><span>JavaScript</span></a></li>
<li><a href="#"><span>Gallery</span></a></li>
</ul>
</div>

[Neo3]

Hallo Party,

Benutze dazu einfach das Pseudoelement :hover de.selfhtml.org - :hover

#navigation li:hover {
display: inline;
background: url(light_greenbg.gif) repeat-x center top;
text-align: center;
padding: 0;
margin-right: 4px; 
float: left;
}
#navigation li:hover a {
color: #663300;
background: url(light_greenleft.gif) no-repeat left top;
float: left;
margin: 0;
padding-left:7px;
text-decoration: none;
}
#navigation li:hover a span {
background: url(light_greenright.gif) no-repeat right top;
display: block;
padding:7px 13px 4px 5px;
}

Vermute nur das es so funktionieren sollte. Versuch es und dann würde ich mich über eine Meldung freuen ob es geht oder nicht.

Gruss Neo3