3

我有一个 CSS 悬停菜单，它适用于所有浏览器，除了......惊喜——IE6！

#menu_right ul li:hover ul { visibility: visible; }

显然，这ul最初是隐藏的。当我将鼠标悬停在它的 parentli上时，它应该出现......但它没有。

为了试图查明问题，我尝试让ul最初可见，并让悬停动作采取其他措施。例如：

#menu_right ul li ul { visibility: visible; }

#menu_right ul li:hover ul { background: red; }

这没有帮助。在其他浏览器（包括 IE7+）上，ul当我将鼠标悬停在其 parent 上时， 将变为红色list element。但不是在 IE6 中。我错过了什么？

4

5 回答 5

8

IE6 不知道 CSS:hover伪属性，当它出现在链接元素之外的任何东西上时。为此，您将不得不使用 JavaScript。试试条件语句，如果你使用jQuery，你可以在 3 行（+/- 格式）中为 IE6 编写悬停效果：

<!--[if lt IE 7]>
<script type="text/javascript">
$('#menu_right ul li').hover (function () {
  $(this).addClass ("hover");
}, function () {
  $(this).removeClass ("hover");
});
</script>
<style type="text/css">
#menu_right ul li.hover {...}
...
</style>
<![endif]-->

马克，在 CSS 语句中我使用了点而不是冒号。

干杯，

于 2009-09-17T21:03:57.493 回答
3

你应该使用这样的东西

<ul>
  <li><a href="#"></a></li>
  <li><a href="#"></a></li>
  <li><a href="#"></a></li>
</ul>

并设置样式<a>而不是<li>. 您只需确保将a的大小设置为与其封闭的大小完全相同li。

div.menu ul.menu {
    margin:0;
    padding:0;
}

div.menu ul li {
    margin:0;
    padding:0;
}

div.menu ul.menu a {
    display:block;
    height:22px;
    margin:0;
    overflow:hidden;
    padding:0;
    width:252px;
}

您看到它适用于除 IE6 之外的所有浏览器的原因是它:hover仅支持<a>元素。

于 2009-09-17T21:28:08.107 回答
3

看看什么：悬停http://www.xs4all.nl/~peterned/csshover.html。这个宝贝解决了各种奇怪的 IE6 悬停问题，可能会解决你的问题。

于 2009-09-20T05:34:47.030 回答
2

除了......上帝我喜欢这个浏览器:hover。<a>

尝试在一个位置方便的地方使用 :hover <a>（如果它是一个链接列表，就像大多数 CSS 悬停菜单一样，这不会是一个问题），或者只是使用 Javascript，正如已经建议的那样。

于 2009-09-17T21:04:06.067 回答
0

正如塔尔所写的那样。我不知道它如何与表格一起使用，但这个示例在 IE6 中完美运行。

http://www.cssplay.co.uk/menus/final_drop.html

于 2013-04-11T12:28:16.467 回答