[ CSS ] A:Hover und background-image ??

[R34P3R]

Hallo zusammen...

ich habe hier ein kleines Problemchen :-)

Meine Menüleiste besteht aus einer Tabelle mit meherehren Spalten, welche wie folgt aufgebaut sind:

  
<td id="menue_table"><div><a href="index.php?modul=home">Home</a></div></td>  

so nun möchte ich... das wenn man über den Link geht das Hintergrundbild der SPALTE verändert wird. Leider wird bei mir immer nur der LINK also der TEXT mit dem Hintergrundbild versehen... was mach ich falsch ?

  
#menue_table {  
	vertical-align:top;  
	text-decoration: none;  
	color: #ff9613;  
	font-family: Verdana, Arial, Helvetica, sans-serif;  
	font-size: 12px;  
	background-image:url('images/design/new_menu_back.jpg');  
	background-repeat: repeat-x;  
	height: 51px;  
	padding:4px;  
}  
#menue_table div {  
	padding-top:3px;  
	padding-left:3px;  
	padding-right:3px;  
}  
#menue_table a:hover, #menue_table div a:hover {  
	color: #ffffff;  
	background-image:url('images/design/new_menu_back_2.jpg');  
	background-repeat: repeat-x;  
}  
#menue_table a, #menue_table div a:visited {  
	text-decoration: none;  
	color: #ff9613;  
	font-family: Verdana, Arial, Helvetica, sans-serif;  
	font-size: 12px;  
}  

Danke für eure Hilfe.

[Gunnar Bittersmann]

@@R34P3R:

nuqneH

Meine Menüleiste besteht aus einer Tabelle mit meherehren Spalten

Ein Menü ist mit ziemlicher Sicherheit keine Tabelle, also ist 'table' falsch.

Ein Menü ist mit ziemlicher Sicherheit eine Liste, also ist 'ul' ('ol') richtig.

so nun möchte ich... das wenn man über den Link geht das Hintergrundbild der SPALTE verändert wird. Leider wird bei mir immer nur der LINK also der TEXT mit dem Hintergrundbild versehen... was mach ich falsch ?

Vermutlich möchtest du '#menue_table a { display: block }' setzen.

Qapla'

[R34P3R]

Hmmm danke aber das Problem besteht weiterhin... nur der LINK-Text wird mit dem neuen Hintergrundbild versehen...

ich habe meinen code nun wie folgt abgeändert:

  
<ul id="menue"><li><a href="index.php?modul=home">Home</a></li></ul>  

  
#menue {  
	list-style-type:none;  
	vertical-align:top;  
	background-image:url('images/design/new_menu_back.jpg');  
	background-repeat: repeat-x;  
	height: 51px;  
	padding:4px;  
}  
#menue li a:hover {  
	color: #ffffff;  
	background-image:url('images/design/new_menu_back_2.jpg');  
	background-repeat: repeat-x;  
}  
#menue li a, #menue li a:visited {  
	display:block;  
	padding-top:3px;  
	padding-left:3px;  
	padding-right:3px;  
	text-decoration: none;  
	color: #ff9613;  
	font-family: Verdana, Arial, Helvetica, sans-serif;  
	font-size: 12px;  
}  

[suit]

Hmmm danke aber das Problem besteht weiterhin... nur der LINK-Text wird mit dem neuen Hintergrundbild versehen...

Works as designed - du musst natürlich auch li:hover ein anders Hintergrundbild zuweisen - dem IE6 muss man hierbei aber ggf. etwas nachhelfen, der versteht kein :hover auf nicht-a-Elemente