PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
W

a:hover in CSS

Door Wietse Sas op 18-08-2008 02:52
407 views
Is het mogelijk om bij een a:hover een onderliggende tag een andere background te geven?

Voorbeeld: in de onderstaande html wil ik de background-image van de li-tag wijzigen bij een hover van de a-tag.

<ul>
<li><a href="...">Menu 1</a></li>
<li><a href="...">Menu 2</a></li>
</ul>

En in onderstaande html de background-image van de div-tag wijzigen bij een hover van de a-tag:

<div><a href="...">Link</a></div>

Alvast bedankt...
M
Maarten Slenter
18-08-2008 09:37
Dat zul je denk ik met javascript doen, ik denk niet dat a:hover een background accepteert;)
W
Wietse Sas
18-08-2008 09:51
a:hover zelf accepteert wel een background, dat is geen probleem. Ik vroeg me enkel af of je de layout van een onderliggende tag kan aanpassen in css als er gehoverd wordt over a...
Eddy E
18-08-2008 10:04
Zoek eens naar parent.
Daarmee kan je wel je child aanspreken, maar andersom niet.

ul li a spreekt dus de UL > LI > A aan.
Maar andersom kan het niet.
PARENT a bestaat niet, terwijl dat (theoretisch) de li zou kunnen aanspreken.

Een tag veranderen kan CSS sowieso niet, maar met een <li> kan je evenveel mee als een <div>.
Met een display: block; etc kan je heel veel. Ook een li kan je absoluut positioneren, floaten, alignen etc etc.
W
Wietse Sas
18-08-2008 10:33
Ok, heb het gevonden, dat gaat inderdaad niet. li:hover a gaat, maar niet de li aanspreken als a gehoverd wordt...

Parent > Child
Parent ~ Child (first child)

Maar Child > Parent is niet mogelijk...

Toch bedankt om er even mee over na te denken...
Jesper Diovo
18-08-2008 12:46
Werkt dit niet?


li {
  background-color: #000;
}

li:hover {
  background-color: #fff;
}


Als je over de a gaat, ga je eigenlijk ook over de li. So, why not? :-P
W
Wietse Sas
18-08-2008 13:07
werkt op alle nieuwste browsers, maar IE6 (nog altijd zeer veel gebruikt) ondersteund geen hover voor li-tags...
E
Emmanuel Delay
18-08-2008 14:37
De vraag is hoe erg het is dat IE6 gebruikers dat niet te zien krijgen. Echt kritisch is het niet, dat ze geen veranderende background zien.
W
Wietse Sas
18-08-2008 15:14
Nee, inderdaad, niet zo erg, ze moeten maar upgraden ;)

Maar was toch de moeite om hier eens te vragen...
Elwin - Fratsloos
18-08-2008 16:44
Maar je kan er wel iets aan doen dat de :hover wel werkt in IE6. Zie hier.
W
Wietse Sas
18-08-2008 17:04
Ja, maar niet met pure CSS, enkel met JavaScript...
En dan moet je nog met conditional comments werken zodat de JavaScript enkel in IE 6 en kleiner wordt uitgevoerd...

Reageren

Inloggen om te reageren