将鼠标悬停在菜单项上 可在 Firefox 中使用，但在 Internet Explorer 中无法使用

Question

这是悬停在 firefox 中工作但在 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;
}

帮助我

Answer 1

IE7 支持 :hover 在锚点上，但 IE8 将支持在 li 上。

Answer 2

当您说 IE 时，最好让我们知道是哪个 (IE6/7/8)。 IE6 不支持 :hover 任何东西，但 IE7/8 支持。

如果您需要它在 IE6 中工作，您有几个选择。

1. 重构您的代码以仅在菜单中使用 's。

2. 使用 Dean Edwards 提供的一个很好的脚本来“升级”IE6 和 IE7，以解决诸如此类的多个问题。 http://www.charlescooke.me.uk/web/lab_notes/ie7_script。 html

3. 你可以使用一些 CSS 和 JS 来让 IE6 识别 :hover 在其他元素上

    /* 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 上除了查看你的代码之外，我现在还没有真正看到它是如何工作的。 您需要的是一个菜单元素，其中的内容设置为显示：无，您还应该使用位置：绝对/相对和顶部：XXpx/左侧：XXpx进行定位。 然后在 :hover 上更改为 display: block。

希望这可以帮助，
丹尼斯

Answer 3

我不相信 ':hover' 伪类是为 IE 中除 'a' 标签以外的任何东西实现的。 尝试另一种方法（使用“onmouseover”事件）。

Answer 4

假设您的菜单项是用户可能从水平“菜单”中选择的链接，并且看起来与此接近：

<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>

尝试此 CSS：

.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;
}

如果您使用无序列表作为菜单，则列表项不是“菜单”，而是无序列表list 是“菜单”，所以在那里应用该类。 并将CSS应用到锚点上以实现悬停功能。

如果您的菜单是垂直的，请忽略 .menu li 样式上的 display:inline 。