Hallo,
ich bastel gerade ein Joomla Template und hab ein Problem mit dem Mouserover Effekt.
Die Menü-Items haben abgerundete Ecken. Joomla erstellt das Menü mit <ul><li><a><span>a</...>. Jetzt hab ich einfach dem li die linke Ecke, dem a die rechte Ecke und dem span das center background verpasst. Soweit auch in Ordnung. Allerdings will ich einen Hover-Effekt darauf anwenden, der die Buttons nach oben vergrößert. Mit
whatever:hover dacht ich nun einen relativ einfachen Weg gefunden zu haben. Problem ist nun, dass der hover über li natürlich nur das Background-image von li verändert und nicht gleich die beiden von a und span auch.
Hier kann man mein ganzes Problem in Action betrachten.
Css-Code
Code:
.menu li {
background:url(../image/gmw_nav_border_left.jpg) left no-repeat;
display:block;
color:red;
height:46px;
float:left;
padding-left:20px;
margin-left:2px;
}
.menu li a {
background:url(../image/gmw_nav_border_right.jpg) right no-repeat;
padding-right:20px;
display:block;
height:46px;
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
font-style: normal;
color: #FFF;
text-decoration: none;
}
.menu li a span {
background:url(../image/gmw_nav_border_center.jpg) top repeat-x;
display:block;
height:46px;
padding-top:14px;
}
.menu li:hover {
background:url(../image/gmw_nav_hover_border_left.jpg) left no-repeat;
}
.menu li a:hover {
background:url(../image/gmw_nav_hover_border_right.jpg) right no-repeat;
}
.menu li a span:hover {
background:url(../image/gmw_nav_hover_border_center.jpg) top repeat-x;
}
Wie krieg ich das in den Griff? Mein erster Gedanke war JQuery, hab zwar noch nicht viel damit gemacht, aber das ist ja nicht alzu kompliziert.
Gibts eine leichtere Lösung?