Hover über ein Menüelement in Firefox arbeiten, aber nicht in Internet Explorer

Question

Hier ist die Codierung, bei der inf firefox hover funktioniert, aber nicht in IE

.menu 
{ 
margin-top:1px; 
display:inline-block; 

background-color:#FCFAB4; 
color:#000000; 
height:30px; 
width:121px; 
padding-top:10px; 
font-size:13px; 
font-weight:bold; 
font-family:Geneva, Arial, Helvetica, sans-serif; 
text-align:center; 

} 

.menu:hover 
{ 

background-color:#990000; 
color:#FFFFFF; 
border-bottom:#CC0000; 
text-decoration:none; 
    cursor:pointer; 
} 

Helfen Sie mir

Answer 1

Ich glaube nicht, das Die Pseudo-Klasse ': hover' ist für alles andere als 'a' Tags im IE implementiert. Versuchen Sie es mit einem anderen Ansatz (verwenden Sie das Ereignis "onmouseover").

Answer 2

Wenn Sie IE sagen, ist es besser, uns wissen zu lassen, welche (IE6/7/8). IE6 unterstützt nicht: Mauszeiger über alles außer IE7/8.

Wenn Sie dies in IE6 arbeiten müssen, haben Sie ein paar Optionen.

1. Refaktorieren Sie Ihren Code, um nur 's in Ihrem Menü zu verwenden.

2. Verwenden Sie ein nettes Skript von Dean Edwards, IE6 und IE7 für verschiedene Probleme wie diese "zu aktualisieren". http://www.charlescooke.me.uk/web/lab_notes/ie7_script.html

3. Sie können ein bisschen CSS und JS verwenden, um einen Weg zu geben IE6 das erkennen: schweben auf andere Elemente

 
    /* Nice work around for IE6 issues with hover only being used on , con is that it needs javascript */ 
    * html li { 
     behavior: expression(
        this.onmouseover = new Function("this.className += ' hover'"), 
        this.onmouseout = new Function("this.className = this.className.replace(' hover','')"), 
        this.style.behavior = null 
       ); 
    }

IE6 beiseite Code Suche ich nicht wirklich bin zu sehen wie es jetzt funktioniert. Was Sie brauchen, ist ein Menüelement mit dem, was darin angezeigt wird: none, auch sollten Sie Position verwenden: absolute/relative und oben: XXpx/links: XXpx. Dann on: hover Sie wechseln zur Anzeige: block.

hoffte, das hilft, Denis

Answer 3

Ihren Menüpunkt Angenommen ist ein Link ein Benutzer von einem horizontalen „Menü“ wählen könnte und sieht diese schließen:

<ul class="menu"> 
<li><a href="http://www.stackoverflow.com" accesskey="s">stackoverflow</a></li> 
<li><a href="http://www.google.com" accesskey="g">google</a></li> 
</ul> 

diesen CSS Versuchen:

.menu li{ 
display:inline; 
list-style-type:none 
} 
.menu li a 
{ 
margin-top:1px; 
display:inline-block; 
background-color:#FCFAB4; 
color:#000000; 
height:30px; 
width:121px; 
padding-top:10px; 
font-size:13px; 
font-weight:bold; 
font-family:Geneva, Arial, Helvetica, sans-serif; 
text-align:center; 

} 

.menu li a:hover 
{ 

background-color:#990000; 
color:#FFFFFF; 
border-bottom:#CC0000; 
text-decoration:none; 
    cursor:pointer; 
} 

Wenn Sie eine ungeordnete Liste als Menü verwenden, sind die Listenelemente nicht das "Menü", die ungeordnete Liste ist das "Menü", also wenden Sie die Klasse dort an. Und wenden Sie das CSS auf die Anker an, um Hover-Funktionen zu erzielen.

Wenn Ihr Menü vertikal ist, ignorieren Sie display: inline in den .men li Styles.

Answer 4

IE7 unterstützt: Hover auf Anker, aber IE8 wird es auf li unterstützen.