data attribuut demo

Ga even met jouw muis over data attribuut demo.
In alle moderne browsers werkt dit "hover-gebeuren". Als je vroeger een "eigen attribuut" ergens aan toevoegde, sprongen de validators in het "rood". Dat is nu verleden tijd. Geheel legaal en zonder een snippertje javascript kan je nu (als voorbeeld) tekst bij een "hover" veranderen. Maar het zal duidelijk zijn dat dit voor alle elementen, en op allerlei verschillende manieren, zal werken. Het enige wat je heel goed door moet hebben is dat ALTIJD de attribuut-naam moet beginnen met "DATA".

Het voorbeeld is eenvoudig. Ik geef hieronder de CSS-code en de regel met de "h1" die op deze pagina als voorbeeld zijn gebruikt.

<style type="text/css">
	h1{
		margin-left:100px;
		position:relative}
	h1:hover{
		color:#021;
		background:inherit}
	h1:hover:after{
		content:attr(data-voor-hover);
		color:#080;
		background:inherit;
		position:absolute;
		left:0}
</style>


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

cache 05-10-2010