jquery - 使用 jQuery 悬停

Question

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

为了允许在 IE 中对 block 元素(例如 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。