1

这是hover在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;
}

帮我

4

4 回答 4

2

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

于 2009-08-13T07:07:45.567 回答
1

当您说 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 在其他元素上

    /* 很好的解决了 IE6 的问题，只使用了悬停，con 是它需要 javascript */
     * html李{
        行为：表达式（
                    this.onmouseover = new Function("this.className += 'hover'"),
                    this.onmouseout = new Function("this.className = this.className.replace(' hover','')"),
                    this.style.behavior = null
                  );
    }

IE6 除了查看您的代码之外，我还没有真正了解它现在是如何工作的。您需要有一个菜单元素，其中的内容设置为 display:none，您还应该使用 position:absolute/relative 和 top: XXpx/left: XXpx 定位。然后在 :hover 上更改为 display: 块。

希望这会有所帮助，丹尼斯

于 2009-08-13T07:57:00.537 回答
0

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

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

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

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

于 2009-08-13T08:37:06.947 回答
0

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

于 2009-08-13T16:48:41.797 回答