优雅的ie6悬停css解决方案答案

【问题标题】：elegant ie6 hover css solution优雅的ie6悬停css解决方案
【发布时间】：2009-10-27 07:11:04
【问题描述】：

我想要一个在 ie6 上不起作用的 tag:hover 解决方案。我的猜测是它必须使用 javascript 来完成。

我找到了这个补丁：csshover3.htc (http://www.xs4all.nl/~peterned/csshover.html)，我查看了它的演示！我没有在我的 ie6 浏览器上工作！

必须有一个优雅的方法来解决这个非常大和基本的问题，可能是一个 jquery 插件。

任何线索都被应用

【问题讨论】：

标签： css

【解决方案1】：

使用 jQuery，您可以使用悬停功能 (http://docs.jquery.com/Events/hover) 在悬停时添加类。

示例：

$("li").hover(
  function () {
    $(this).addClass('ie6-hover');
  }, 
  function () {
    $(this).removeClass('ie6-hover');
  }
);

然后您可以使该类具有相同的属性。

li:hover, li.ie6-hover {
    text-decoration: underline;
}

【讨论】：

基于每个标签的简单解决方案。在他的情况下，我建议还应用一个特定的类来限制页面上的匹配数。

【解决方案2】：

一个简短的 jQuery 插件为我做这件事

 IE6TableHover: function()
    {
        if(jQuery.browser.msie && /6.0/.test(navigator.userAgent))
        {
            $(this).hover(
                    function(){
                        $(this).addClass('jshover');
                    }, function(){
                        $(this).removeClass('jshover');
                    });
        }
    }

这里需要 jQuery 版本 1.2.6 for 1.3.x 你必须更改浏览器检查。

【讨论】：

遗憾的是，由于 IE6 也不能正确支持 CSS 中的多个类，因此如果您尝试将其应用于具有现有类的元素，这将具有有限的实用性。

【解决方案3】：

如果您谈论的是非锚标记上的鼠标悬停，您可以使用 jQuery 添加一个事件处理程序来捕获鼠标悬停事件。

【讨论】：

【解决方案4】：

可能不适用于您的上下文，但您始终可以强调让您的 a 元素具有悬停效果。例如，在导航 ul>li>a 列表中，使用 display:block 设置 a 元素的样式并设置它们的样式，而不是 lis。

【讨论】：

【解决方案5】：

有 Google 的 ie7-js，但我不确定它是否解决了透明 png 问题以外的任何问题。

Visibility inherit 提供了这个alternative，它直接解决了 mouseOver/:hover 问题。

【讨论】：