IE中非链接元素的悬停问题答案

【问题标题】：hover problem with non link elements in IEIE中非链接元素的悬停问题
【发布时间】：2011-02-15 07:16:48
【问题描述】：

有什么方法可以为所有 html 元素使用“悬停”属性，而不仅仅是 IE 中的 ''？

例如 'li:hover' 。它在 IE6 中不起作用。（我不知道其他版本的IE）。

编辑：我只想用 CSS 没有 javascript 来做。这是一个简单的菜单。

【问题讨论】：

:hover 在 IE8 中可以正常工作。
谢谢，但是很多用户已经有IE6了。

标签： css internet-explorer-6 hover

【解决方案1】：

我不认为在 IE 6 中没有 javascript 就可以做到这一点。

如果它是一个单级菜单，您可能可以调整样式以使链接呈现为 li 内的 display:block 以便您可以对它们执行悬停，如果需要，可以将跨度放置在链接内以获得额外的样式灵活性，但个人从来没有太多运气尝试将其扩展到多级菜单。

优雅的降级策略可能是你最好的选择。

【讨论】：

好的，最后我使用来自xs4all.nl/~peterned/csshover.html 的一些sn-p javascript 代码作为csshover htc 文件来更改IE 的主体行为。似乎没有 Javascript 是不可能的！

【解决方案2】：

在 javascript 中使用 onmouseover/onmouseout。

当您将鼠标悬停在一个元素上时，您只需显示一个带有悬停内容的隐藏 div。

当您将鼠标移出某个元素时，您将通过悬停内容隐藏 div。

如果你不想做所有的腿工作，Jquery 会让这更容易

<span id="hoverSpan" class="hoverelement" hoverdata="this is my hoverdata">HoverSpan</span>
<a href="#" id="hoverAnchor class="hoverelement" hoverdata="this is my hover data">HoverAnchor</a>
<div id="hoverdiv" style="display:none"></div>

<script language="javascript">
  $(document).ready(function () {
     $(".hoverelement").each( function () {
       var myelement = $(this);
       myelement.mouseover( function (e) {
         var myhovertext = myelement.attr("hoverdata");
         $("#hoverdiv").html(myhovertext).show();
       });
       myelement.mouseout( function (e) {
         $("#hoverdiv").html(myhovertext).hide();
       });
     });
  });
</script>

它已经很晚了，我没有测试这个，但这个想法是存在的。基本上，您可以为任何具有“hoverelement”类的元素进行悬停

【讨论】：

感谢您的评论，但我不想使用 javascript。只需使用 CSS 。
我不相信 Just css 是可能的。不同的浏览器/版本和 :Hover 样式存在太多问题

【解决方案3】：

试试jquery...我不太清楚，但它可能适用于 IE6....

【讨论】：

【解决方案4】：

不，IE6 没有为所有元素正确实现 :hover 伪类。它只支持锚点。

【讨论】：