:hover mit dem IE?

[Tobias Stening]

Hallo,

ich bin gerade darauf gestoßen, dass der IE anscheinend :hover nicht korrekt unterstützt. Ich habe ein Menü, dessen Menüpunkte mit CSS formatiert sind. Wenn sich die Maus über dem Menüpunkt befindet, soll sich der Hintergrund anders färben.

Ein Menüpunkt sieht in etwa so aus:

<div class="menubutton">
<a href="cp.html">Corporate Profile</a>
</div>

Das CSS dazu sieht aktuell so aus:

.menubutton {
  font-size: 11px;
  color: #000000;
  border-left: 4px solid #0f7f2d;
  border-bottom: 1px solid #E5E5E5;
  padding-left: 6px;
  padding-top: 3px;
  margin-left: 5px;
  margin-top: 2px;
  height:16px;
  width:180px;
}

.menubutton:hover {
  background-color: #CCE9D6;
}

.menubutton a {
  color: #000000;
  text-decoration: none;
}

.menubutton a:hover {
  color: #000000;
  text-decoration: none;
}

Wie man sieht, wird ein Bereich erzeugt, der bei :hover eine andere Hintergrundfarbe bekommt.

Mit dem IE wird jedoch nur der Link selber, also alles innerhalb von <a>...</a> hinterlegt, nicht jedoch der mit menubutton definierte Bereich.

Im Netz habe ich Hinweise gefunden, dass man das Problem mit den behaviors des IE lösen könnte. Gibts definitiv keine andere Lösungsmöglichkeit?

Wenn nein, kann mir jemand nen Hinweis geben, wie das mit den behaviors des IE dann auszusehen hat?

Viele Grüße,
Tobias :-)

[Ingo Turski]

Hi,

Im Netz habe ich Hinweise gefunden, dass man das Problem mit den behaviors des IE lösen könnte. Gibts definitiv keine andere Lösungsmöglichkeit?

Nein. Der IE bis einschl. Version 6 kann das nicht, so daß Javascript nötig ist. Nichts anderes sind diese "behavior"-Anweisungen nämlich: invalide in CSS gepacktes JScript.Seshalb würde ich Dir auch eher zu einer validen Javascriptroutine raten.

freundliche Grüße
Ingo

[Tobias Stening]

Hi,

Im Netz habe ich Hinweise gefunden, dass man das Problem mit den behaviors des IE lösen könnte. Gibts definitiv keine andere Lösungsmöglichkeit?
Nein. Der IE bis einschl. Version 6 kann das nicht, so daß Javascript nötig ist. Nichts anderes sind diese "behavior"-Anweisungen nämlich: invalide in CSS gepacktes JScript.Seshalb würde ich Dir auch eher zu einer validen Javascriptroutine raten.

Wenn ich Dich richtig verstehe, meinst Du in DHTML-Manier mittels onmouseover ein Java Skript aufrufen, mit dem ich dann die Styleeigenschaften ändern kann.

Problem bei der ganzen Sache: Die Menüpunkte werden von Typo3 erzeugt und somit ist eine direkte Referenzierung nicht möglich, da ich beliebig viele Menüpunkte haben kann. Ich müsste beim Aufruf über onmouseover nicht nur wissen, von welchem Objekt der Aufruf kam, sondern auch noch rausbekommen, welches div um das das Objekt gelegt ist, damit ich genau dieses div verändern kann.

Vielleicht kann ich ja Typo3 dazu überreden, mir die Menüpunkte nicht so zu erzeugen:

<div class="menubutton">
<a href="cp.html">Corporate Profile</a>
</div>

sondern so:

<a href="cp.html" class="menubutton">Corporate Profile</a>

Dann kanns nämlich auch der IE. :-)

Viele Grüße,
Tobias

[Dennis]

Hi Tobias,

Vielleicht kann ich ja Typo3 dazu überreden, mir die Menüpunkte nicht so zu erzeugen:

<div class="menubutton">
<a href="cp.html">Corporate Profile</a>
</div>

sondern so:

<a href="cp.html" class="menubutton">Corporate Profile</a>

Dann kanns nämlich auch der IE. :-)

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 */  
}

MfG, Dennis.

[Tobias Stening]

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

[Auge]

Hallo

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.  
  
Doch, wenn du <a>, wie oben gezeigt, zu einem Blockelement machst (`display:block;`{:.language-css}), und zusätzlich noch Breiten- und Höhenangaben machst, wird auch der Hintergrund flächenfüllend angezeigt und geändert.  
  
Dann reicht auch ...  
  

> <a href="cp.html" class="menubutton">Corporate Profile</a>  
  
... ohne <div>s drumrum.  
  
Tschö, Auge  

-- 
Die Musik drückt aus, was nicht gesagt werden kann und worüber es unmöglich ist zu schweigen.  
(Victor Hugo)  
  
[Veranstaltungsdatenbank Vdb 0.1](http://termindbase.auge8472.de/)

[Ingo Turski]

Hi,

Wenn ich Dich richtig verstehe, meinst Du in DHTML-Manier mittels onmouseover ein Java Skript aufrufen, mit dem ich dann die Styleeigenschaften ändern kann.

Problem bei der ganzen Sache: Die Menüpunkte werden von Typo3 erzeugt und somit ist eine direkte Referenzierung nicht möglich, da ich beliebig viele Menüpunkte haben kann. Ich müsste beim Aufruf über onmouseover nicht nur wissen, von welchem Objekt der Aufruf kam, sondern auch noch rausbekommen, welches div um das das Objekt gelegt ist, damit ich genau dieses div verändern kann.

nö, müßtest Du nicht. Schau Dir mal das Beispiel http://de.selfhtml.org/css/layouts/navigationsleisten.htm#javascript an. Hier werden die Event-Handler für den IE onload gesetzt, ohne das HTML ändern zu müssen. Bei mehreren hover-Definitionen würde sich auch anbieten, den Elementen eine spezielle Klasse über Javascript zuzuweisen und dieser dann im CSS die gewünschten Eigenschaften zu geben.

Aber dieses Script brauchst Du ja garnicht, wenn Du wie schon vorgeschlagen die a passend definierst. Bei dem obigen Beispiel wird das Javascript für den IE ja lediglich verwendet, um die Unterpunkte einzublenden; der hover-Effekt erfolgt auch im IE ausschließlich über CSS.

freundliche Grüße
Ingo