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中的多个类，f.ex：

div.one.two{color:red}

不适用于<div class="one two">red</div>

<强>更新这也可能是一个冒泡的问题，请尝试使用.hover助手http://docs.jquery.com/Events/hover来阻止这种情况。

Answer 4

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

http://jsbin.com/uyopi

使用jQuery悬停

4 个答案: