KOMPOOS.NL

data attribuut - HTML5

home » manuals » html5 » html5-data-attribuut.html

sitemap | terug naar het html5 referentie - standaard - overzicht

voorbeeld data attribuut

data attribuut demo

uitleg data attribuut gebeuren

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"...

voorbeeld html-code

<h5 data-voor-hover=" prima, het werkt "> data attribuut demo  </h5>

stylesheet van dit data-attribuut voorbeeld

<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

data attribuut HTML5
Bobik+