sitemap | terug naar het html5 referentie - standaard - overzicht
Als je met jouw muis even over de tekst hierboven (data attribuut demo) gaat, zal je zien dat niet alleen de kleur bij een hover verandert. Als jouw browser met het data-attribuut overweg kan (en dat kunnen alle moderne browsers), zal ook de tekst veranderd zijn. Kijk even naar de stylesheet hieronder en de voorbeeld html-code hoe alles in elkaar zit. Het enige wat je moet weten is dat je altijd moet beginnen met data-. In dit voorbeeld is dat dus "data-voor-hover". Je kan heel veel toepassingen hiervoor "verzinnen"...
<h5 data-voor-hover=" prima, het werkt "> data attribuut demo </h5>
<style type="text/css">
h5{
display:inline-block;
white-space:nowrap;
font-size:34px;
margin:-5px 0 0 20px;
position:relative}
h5:hover{
color:transparent;
background:inherit}
h5:hover:after{
content:attr(data-voor-hover);
color:#080;
background:inherit;
position:absolute;
left:0}
</style>
DesignApplication