IE6 CSS 悬停菜单问题

2022-01-22 00:00:00 compatibility hover html css internet-explorer-6

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

I have a CSS hover menu which works in all browsers except... surprise -- IE6!

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

这个ul 显然最初是隐藏的.当我将鼠标悬停在其父 li 上时，它应该会显示出来......但它没有.

This ul is hidden initially, obviously. When I hover over its parent li, it should show up... but it doesn't.

为了找出问题所在，我尝试让 ul 最初 可见 并让悬停动作采取其他方式.例如:

To try to pinpoint the problem, I've tried making the ul initially visible and had the hover action take on something else. For example:

#menu_right ul li ul { visibility: visible; }

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

这没有帮助.在其他浏览器(包括 IE7+)上，当我将鼠标悬停在其父 list 元素 上时，ul 将变为红色.但不是在 IE6 中.我错过了什么?

This doesn't help. On other browsers (including IE7+), the ul will turn red when I hover over its parent list element. But not in IE6. What am I missing?

推荐答案

IE6 不知道 CSS :hover 伪属性，当它出现在除了链接元素之外的任何东西上时.为此，您将不得不使用 JavaScript.试试条件语句，如果你使用jQuery，可以在3(+/- 格式)行:

IE6 doesn't know the CSS :hover pseudo-attribute, when it appears on anything than a link element. You will have to use JavaScript for this. Try conditional statements, and if you use jQuery, you can code the hover effect for IE6 in 3 (+/- formatting) lines:

<!--[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 语句中使用了点而不是冒号.

Mark, that in the CSS statements I used the dot instead of the colon.

干杯，

相关文章