Hoe laat ik een div (zijn background) een andere kleur aannemen als ik met mijn muis eroverheen ga?


<a href='index.html' class='linkclass'>
<div class='divclass'>
Dit is een knop
</div>
</a>
MikeY schreef op 09.03.2009 10:43
o trouwens het niet niet helemaal W3C om een DIV in je anchor te zetten.

dus ik zou display block gebruiken als je de anchor een specifieke hoogte en breedte mee wilt geven
Klopt, je mag officieel niet een block in een inline element zetten, dit valideert niet. Wat hij zou kunnen doen is er een span van maken en die een display:block; geven. Of gelijk van zijn link een block maken.
@MikeY: ik wil een button maken idd met een rollover zeg maar..

Ik heb het inmiddels al opgelost hoor! dit heb ik nu gedaan:


/* CSS */
a:hover div.divclass
{
	color: #ff0000;
	background-color: #cccccc;
	text-decoration: none;
         
}

<!-- HTML -->
<a href='index.html' class='linkclass'>
<div class='divclass'>
Dit is een knop
</div>
</a>


werkt zowel in FF als in IE :)
waarom heb je die div er instaan ?

dat is totaal niet w3c

maar werkt het ook in ie6 ?
MikeY schreef op 09.03.2009 11:04
waarom heb je die div er instaan ?

dat is totaal niet w3c

maar werkt het ook in ie6 ?
Achja, als we zouden kijken welke "grote" websites wel allemaal niet valideren, kregen we een lang was lijstje.

Het lijkt me niet dat het werkt in IE6, maar achja.. Who cares?
MikeY schreef op 09.03.2009 11:22
haha 30% van de bezoekers ?
Des te langer dat wij het blijven ondersteunen, des te langer blijft het bestaan. Ik vind persoonlijk dat de gebruiker gedwongen moet worden om naar een nieuwere browser over te stappen en anders krijgt de gebruiker de webpagina gewoon niet goed te zien. Eigen schuld, dikke bult. :)

Edit: Ik geloof trouwens niet dat IE6 nog 30% van marktwaarde heeft, misschien net iets boven 10%.
daarom hebben ze deze pagina in de wereld gebracht

http://fronteers.nl/_tmp/ie6-upgrade/

hier is wel jQuery voor nodig
<!--[if lte IE 6]>
  <iframe id="ie6info" src="http://fronteers.nl/_tmp/ie6-upgrade/" frameborder="no" style="height: 81px; width: 100%; border: none; position:absolute; z-index: 99999; overflow: none;" scrolling="no"></iframe>
  <script type="text/javascript">
    $(document).ready(function(){
      window.setTimeout(function(){
        $('#ie6info').slideUp('slow',function(){$('#ie6info').remove()});
      },8000);
    });
  </script>
<![endif]-->
Die hover is toch maar een klein grafisch detail. Of je nu IE6 of 7 of Firefox gebruikt de werking blijft hetzelfde.
Ik denk ook dat het te maken heeft met wat voor doelgroep je aanspreekt, ikzelf spreek vaak met mijn websites de wat jongere mensen aan, die vaak al een nieuwere browser hebben, dus krijg ik van de 10.000 bezoekers misschien maar van 1 de klacht dat de website er niet uitziet en dat ze die melding van overstappen irritant vinden.

Zo'n zelfde soort script heb ik pas geleden ook geschreven, maar bij die van mij werd de rest van de pagina "onklikbaar" en zwart met een opacity. :)

Reageren