background-color li:hover in een li

[Rexomnium]

Voor een navigatie heb ik de volgende code

HTML:

<ul>
                    
    <li><a href=""><em>Item 1</em></a></li> (hoofdlistitem)
    <li><a href=""><em>Item 2</em></a> (hoofdlistitem)
        <ul>
            <li><a href=""><em>Subitem 1</em></a></li> (sublistitem)
            <li><a href=""><em>Subitem 2</em></a></li> (sublistitem)
        </ul>
    </li>
    <li><a href=""><em>Item 3</em></a></li> (hoofdlistitem)
</ul>

Deze code is onveranderlijk, aangezien deze door een CMS wordt uitgespuugd. Ik heb geen controle over de HTML die ik kan gebruiken.

Nou wil ik dit aanpassen met behulp van CSS. Dat gaat allemaal redelijk, maar als ik een :hover wil maken voor elk listitem, dan gaat het niet zo als ik wil dat het gaat.

Bij elk listitem afzonderlijk wil ik namelijk een witte achtergrondkleur zien.

Als het om een singlelevel navigatie gaat, is dat eenvoudig te bereiken met:

Cascading Stylesheet:

li:hover a {
background: #fff;
}

Het probleem is dan dat de achtergrondkleur van een hoofdlistitem verandert als ik over een sublistitem hover. Als ik de CSS verander als volgt:

Cascading Stylesheet:

li ul li:hover a {
background: #fff;
}

Dan verandert alleen de achtergrondkleur van de sublistitems, maar dan doen helaas de hoofdlistitems het niet meer.

Als ik de beide CSS-varianten gezamenlijk gebruik, krijg ik hetzelfde resultaat als mijn eerste probleem.

Is dit op te lossen zonder gebruik te maken van Javascript? Kan iemand mij een goede tip geven?

[MueR]

Cascading Stylesheet:

li:hover > a { background:#fff; }

Gebruik child selectors

[Bosmonster]

Let wel op dat dat niet werkt in IE6, mocht dat een eis zijn.

Het is uiteraard wel de beste oplossing.

[Rexomnium]

Geweldig! Dank jullie wel. Het is inderdaad een vrij simpele vraag en dito oplossing. Ik wist alleen hoe en waar ik op moest zoeken in Google.

Toch lijkt het niet helemaal te werken, aangezien bij een hover over een child item het parent item ook een witte achtergrond krijgt. Dit is met name hinderlijk (in mijn ogen) als een parent item maar 1 child item heeft. Is dat ook nog op te lossen?

[MueR]

De hoverstate op de parent blijft uiteraard wel actief ja. Als dat niet het geval zou zijn, zou ook je submenu verdwijnen.

[Rexomnium]

MueR schreef op dinsdag 27 juli 2010 @ 12:37:
De hoverstate op de parent blijft uiteraard wel actief ja. Als dat niet het geval zou zijn, zou ook je submenu verdwijnen.

Goed, maar de bottomline is dat ik dus geen hover kan maken voor elke li afzonderlijk (of het nou een parent is of een child of een child-child)?

[MueR]

Zonder javascript zal dat lastig gaan inderdaad, tenzij ik ergens niet aan denk.

[LinkinTED]

Probeer dit eens:

Cascading Stylesheet:

li a {
display: block;
background: #fff;
}

li a:hover {
background: #f90;
}

Mocht dit niet werken, heb je dan een link naar een online voorbeeld?


Pseudo classes (:hover) werken in IE alleen maar op a tags, en niet op andere tags. Beste is om dat te blijven hanteren, en geen pseudo classes te gebruiken op andere tags.

[R4gnax]

LinkinTED schreef op vrijdag 30 juli 2010 @ 09:37:
Pseudo classes (:hover) werken in IE alleen maar op a tags, en niet op andere tags.

In IE6 werkt de :hover pseudo class alleen op anchor tags. In IE7 werkt deze wèl op alle tags, maar zijn er nog problemen met descendant nodes die niet correct al hun CSS eigenschappen bijwerken. (Bijv. met selectors zoals "li:hover span".) In IE8 werkt deze gewoon goed en is er ook ondersteuning voor de :focus class.