Hoe elementen weergeven bij hover
- Previous page Tooltip
- Next page Pop-up window
Leer hoe je elementen kunt weergeven bij hover
Houd de muis over mij.
Wanneer iemand de muis over de bovenstaande div houdt, zal deze verschijnen.
Hoe elementen weergeven bij hover
Stap 1 - Voeg HTML toe:
<div class="myDIV">Houd de muis over mij.</div> <div class="hide">Wanneer iemand de muis over de bovenstaande div houdt, zal deze verschijnen.</div>
Stap 2 - Voeg CSS toe:
.hide { display: none; } .myDIV:hover + .hide { display: block; color: red; }
Voorbeeld uitleg:
Naastgelijke niveau selector (+
) geselecteerd die direct naast het opgegeven element liggen.
De betekenis van het woord 'naast' is 'direct daarna', in het voorbeeld worden alle elementen met class=".hide"
De elementen, deze worden geplaatst naast de elementen met de hover, wanneer deze worden gehoverd class=".myDIV"
After the element.
Related pages
Tutorial:CSS Combinator
- Previous page Tooltip
- Next page Pop-up window