How to: [CSS] Een mouse over maken

Algemeen

Benodigdheden

• Basis HTML
• Basis CSS

Werkwijze

We gaan dus een menu maken met een mouseover effect. De simpelste manier om dit effect te krijgen is door simpelweg het attribuut ‘:hover’ te gebruiken. Bijna alle moderne browsers ondersteunen dit (IE7, FF, Opera & Safari). Dan zou je het dus als volgt kunnen doen:

1
2
3
4
5
6
7

<ul id="menu">
<li><a href="#">Nieuws</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Scripts</a></li>
<li><a href="#">Reviews</a></li>
</ul>

1
2
3
4
5
6
7

ul#menu li{
	background-color:#99cc00;
	width:120px;
	}
ul#menu li:hover{
	background-color:#ffcc00;
	}

Het ‘:hover’-attribuut wordt echter niet ondersteunt door IE6 op elementen naast het ‘a’-element. Dus gaan we het iets anders doen.

We beginnen met een leeg document. We gebruiken gewoon dezelfde html.

1
2
3
4
5
6
7

<ul id="menu">
<li><a href="#">Nieuws</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Scripts</a></li>
<li><a href="#">Reviews</a></li>
</ul>

Alleen gebruiken we een iets andere css:

1
2
3
4
5
6
7
8

ul#menu a{
	background-color:#99cc00;
	display:block;
	width:120px;
	}
ul#menu a:hover{
	background-color:#ffcc00;
	}

Wat hebben we nou gedaan? We hebben de ‘:hover’-attributen op de ‘a’-elementen gezet. Deze ‘a’-elementen hebben we in de css ‘display: block;’ meegegeven. Dat zinnetje zorgt ervoor dat hij de link als een ‘block’-element ziet. Je hebt in html twee verschillende soorten elementen: block en inline. Block-elementen zijn dingen als div’s en tabellen. Een inline-element is de opvulling. Dus een stuk tekst in een <p> of een plaatje door middel van de <img>-tag.

Doordat we ‘display: block;’ hebben meegegeven denkt de browser nu dat het ‘a’-element in dit menu een block-element is. Waardoor we hem een breedte hoogte en dergelijke kunnen geven.

In plaats van background-color kun je natuurlijk ook background-image gebruiken om er een plaatje aan te hangen.

Een live voorbeeld van deze code kun je hier bekijken.