[css] Rollover
Via de volgende code heb ik mijn rollover;
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
#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;
}
#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?
Gesponsorde koppelingen:
Code (php)
1
2
3
4
2
3
4
a .selected,
a:hover {
background-position:0% -26px;
}
a:hover {
background-position:0% -26px;
}
Code (php)
1
2
2
#menu a:hover {background-position:0% -26px;}
#menu a:hover span {background-position:100% -26px;}
#menu a:hover span {background-position:100% -26px;}
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
#menu a.selected,
#menu a:hover {
background-position:0% -26px;
}
#menu a.selected,
#menu a:hover span {
background-position:100% -26px;
}
#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.
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
a .selected{
background-position:0% -26px;
}
#menu .selected a{
background-position:100% -26px;
}
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)
Code (php)
1
<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)
Code (php)
1
<div id="menu"><p class="selected"><a href="#">Blaat</a></p></div>
je zou dit moeten doen:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
a.selected{
background-position:0% -26px;
}
#menu.selected a{
background-position:100% -26px;
}
background-position:0% -26px;
}
#menu.selected a{
background-position:100% -26px;
}
Gewijzigd op 01/01/1970 01:00:00 door Robert Deiman
