Abgerundete Ecken: Hover Problem

Danto · #1 (**permalink**) 17.03.2010, 07:27

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?

Danto · #2 (**permalink**) 17.03.2010, 11:00

Habs mittlerweile hingebracht. Mit JQuery gelöst:

Code:

<script>  
jQuery(function($) {
  $(document).ready(function(){  
	$(".menu li:not(#current)").hover(
	  function() {  
		$(this).css('background', 'url(templates/<?php echo $this->template ?>/image/gmw_nav_hover_border_left.jpg) left no-repeat');
		$(this).find('a').eq(0).css('background', 'url(templates/<?php echo $this->template ?>/image/gmw_nav_hover_border_right.jpg) right no-repeat');
		$(this).find('span').eq(0).css('background', 'url(templates/<?php echo $this->template ?>/image/gmw_nav_hover_border_center.jpg) top repeat-x');
		$(this).find('span').eq(0).css('padding-top', '8px');
	  },
	  function() {  
		$(this).css('background-image', 'url(templates/<?php echo $this->template ?>/image/gmw_nav_border_left.jpg)');
		$(this).find('a').eq(0).css('background', 'url(templates/<?php echo $this->template ?>/image/gmw_nav_border_right.jpg) right no-repeat');
		$(this).find('span').eq(0).css('background', 'url(templates/<?php echo $this->template ?>/image/gmw_nav_border_center.jpg) top repeat-x');
		$(this).find('span').eq(0).css('padding-top', '14px');
	  }
	);  
  });  
});
</script>

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
hover problem	ChampS	CSS	12	28.01.2010 21:50
abgerundete ecken probleme mit aufteilung	juliank	CSS	1	19.04.2006 13:39
Dropdown Menu mit :hover Problem	mikeIV	CSS	0	12.04.2006 16:13
css tooltip hover problem	Deude	CSS	2	15.05.2005 17:49
:hover Problem im Firefox	ulle	CSS	14	21.04.2005 16:47