Website - CSS, Mouse-overs maken
Poster: andries, gepost op: 30-09-08 21:05

Mouse-overs kunnen een leuke aanvulling zijn op je website, nu is het al makkelijk om een mouse-over / hover te maken voor links, door een combinatie van HTML en CSS kun je ook eenvoudig mouse-overs maken voor andere elementen zoals divs, spans en p elementen.

Wat er hier in de onderstaande tutorial gebeurd is dat er een code wordt toegevoegd aan het element wat in dit geval een div met inhoud is. Hierin wordt dan een verwijzing gemaakt naar de CSS classnamen, in de code vermeld je dan de classnaam bij een mouse-out en een mouse-over. Vervolgens kun je dan deze classes weer invullen naar wens in de CSS met alle mogelijkheden van dien.

Als eerste dan het HTML gedeelte, een div in dit geval, hieraan voeg je de onderstaande code toe waarin de classnamen zelf te bepalen zijn. Zorg wel dat de class van de mouse-out overeenkomt met de normale class van het element.


code:

Door dit aan een div toe te voegen wordt de code als volgt


code:

1
2



<div class="classout" onmouseover="this.className='classover'" onmouseout="this.className='classout'">De inhoud van de div</div> 


De CSS code dan voor de div is als hieronder. In eerste instantie zie je bovenin de code de twee classnamen (classout en classover) genoemd waarmee ze beide dezelfde eigenschappen krijgen. Eronder wordt dan classover opnieuw genoemd om zo een aparte stijl toe te passen op de mouse-over. Je hoeft hier dan alleen de opmaak mee te geven die je wilt wijzigen. In dit geval wordt bij de mouse-over het element doorzichtig (opacity) en krijgt de div een andere achtergrond, tekstkleur en de hoogte is gewijzigd.


code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25



<style type="text/css">
div.classout,
div.classover {
width:375px;
height:100px; 
margin-top:0px;
margin-bottom:15px;
background-color:#FF6F26;
overflow:scroll;
overflow-x:hidden;
border:1px solid #B8CADA;
color:#ffffff;
font-size:8pt;
}

div.classover {
height:150px; 
background-color:#000000;
border:1px solid #B8CADA;
color:#FFFFFF;
opacity: 0.5;
filter: alpha(opacity=50);
}
</style> 


Op deze manier kun je diverse combinaties van mouse-overs maken ook bij bijvoorbeeld afbeeldingen etc. Voor een link is het niet nodig om het op deze manier te doen, hiervoor kun je hover gebruiken in je CSS code, over hovers wil ik later nog wel eens een artikel maken

Rate dit script:
Je hebt nog niet gestemd. Rate hier het artikelen: zeer slecht slecht matig goed zeer goed

Reacties:
Er zijn nog geen reacties geplaast.