Tobias Stening: :hover mit dem IE?

Beitrag lesen

Hi Dennis,

Warum soll der IE es im zweiten Fall können und im ersten nicht? Ja, ich weiß - der IE unterstützt :hover nur bei a-Elementen, aber du kannst doch auch im ersten Fall :hover auf das a anwenden:

div.menubutton a

{
  display:block;
}
div.menubutton a:hover
{
  /* Hover Formatierung */
}

  
Ja, der IE wendet :hover auf das a an. Aber dann wird eben nur der Linktext verändert, nicht jedoch der gesamte Bereich, der durch menubutton definiert ist.  
  
<div class="menubutton">  
  <a href="cp.html">Corporate Profile</a>  
</div>  
  
Hier wird ein Bereich definiert, in dem ein Link liegt. Gehe ich mit der Maus drüber, wird :hover ausgewertet. Der IE kann die Anweisung für :hover jedoch nicht auf das div anwenden, sondern nur auf den darin liegenden a-Tag. Folglich wird nur der Hintergrund des Linktextes verändert. Ich möchte aber den Hintergrund des umschließenden div verändern. Die Möglichkeit, display:block zu verwenden, habe ich jedoch noch nicht getestet.  
  
<a href="cp.html" class="menubutton">Corporate Profile</a>  
  
Hier wird a direkt mit dem Style formatiert. Deshalb kann der IE hier  bei :hover den Hintergrund korrekt setzen.  
  
Die zweite Lösung hat aber auch den weiteren Vorteil, dass der ganze Button als Link fungiert und nicht nur der Text, wie in der ersten Lösung.  
  
Viele Grüße,  
Tobias