使用 jQuery 悬停

Question

调试我的 jQuery 代码时遇到一些问题...

为了允许在 IE 中对块元素（例如 div）实现悬停效果，我想使用 jQuery 而不是 css 来实现这一点。我的 jQuery 代码看起来像这样：

$(document).ready(function()
{
    $("div.foo").mouseover(function(){
            $("div.foo h3").addClass("hover");
        }).mouseout(function(){
            $("div.foo h3").removeClass("hover");
    });
});

这作为我的标题在 h3 和 h3.hover 之间切换，但是如果我尝试：

$(document).ready(function()
{
    $("div.bar").mouseover(function(){
            $(this).addClass("hover");
        }).mouseout(function(){
            $(this).removeClass("hover");
    });
});

这不会'不适用于所有版本的 IE。这是否意味着 IE 无法检测 1 个元素（即 div.bar.hover）上的多个类？提前致谢。

编辑：

检查代码后，我意识到问题在于与也应用于此元素的 javascript curvycorners-2.0.4 （这是另一个 IE hack）的冲突。

Answer 1

使用toggleClass代替：

$(document).ready(function()
{
    $("div.bar").mouseover(function(){
            $(this).toggleClass("hover");
        }).mouseout(function(){
            $(this).toggleClass("hover");
    });
});

如果不存在，它将添加类，如果已经应用，它将删除。

更正： div.bar.hover 不是 IE6 的有效 CSS 选择器。相反，执行类似的操作：#myPanel div.hover。

Answer 2

甚至更短：

$('div.bar').on('mouseenter mouseleave', function () {
    $(this).toggleClass('hover');
});​

Answer 3

确实，IE6 无法处理 CSS 中的多个类，例如：

div.one.two{color:red}

不适用于

red

更新：
这也可能是一个冒泡问题，请尝试使用 .hover 帮助器 http://docs.jquery.com /Events/hover 来防止这种情况发生。

Answer 4

您提供的示例在 IE6 中完美运行（无法检查 IE7/8）。检查这里

http://jsbin.com/uyopi