Beste dames en heren,

Via de volgende code heb ik mijn rollover;

#menu a:hover span {color:#FFFFFF;}
#menu a:hover {background-position:0% -26px;}
#menu a:hover span {background-position:100% -26px;}

a .selected{
    background-position:0% -26px;
}

#menu .selected a{
    background-position:100% -26px;
}


Nu wil ik dus als een menu item de class selected heeft, het zelfde effect geeft als dat je er normaal met je muis overheen gaat. Hoe kan ik dit regelen?
a .selected,
a:hover {
  background-position:0% -26px;
}
Nee, helaas werkt dat ook niet.
Dan snap ik je vraagstelling niet.
Als een link de class 'selected' heeft, moet hij de zelfde effecten krijgen dan als je er met je muis overheen gaat.
Dat is dat stukje code van Jezpur. Een A element met de class selected en a:hover, dus als je over een a element heen gaat.
Als hij de class heeft, moet hij dit uitvoeren (ook als er geen muis op staat);

#menu a:hover {background-position:0% -26px;}
#menu a:hover span {background-position:100% -26px;}

#menu a.selected,
#menu a:hover {
  background-position:0% -26px;
}

#menu a.selected,
#menu a:hover span {
  background-position:100% -26px;
}


Als dat het nog steeds niet is, leg jij het fout uit.

a .selected{
    background-position:0% -26px;
}

#menu .selected a{
    background-position:100% -26px;
}


Wat dit betekend (zie de spatie na de a)is het vogende:
Zoek een element met de class "selected" binnen een a tag (in 't geval van de 1e regel) (bijv)

<a href="#"><em class="selected">Blaat</em></a>


In het geval van de 2e betekend het: Zoek een a-element in een element met de class "selected" welke zich op zijn beurt in een element met "menu" als id bevind. (bijv)

<div id="menu"><p class="selected"><a href="#">Blaat</a></p></div>


je zou dit moeten doen:

a.selected{
    background-position:0% -26px;
}

#menu.selected a{
    background-position:100% -26px;
}

Reageren