使用 jQuery 悬停

Posted 2023-03-06

【中文标题】使用 jQuery 悬停

【英文标题】：Hover using jQuery

【发布时间】：2010-12-19 00:07:35

【问题描述】：

在调试我的 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）冲突。

【问题讨论】：

div 不是非块元素，顺便说一下。

@Jacob，感谢指正。

【参考方案1】：

更短：

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

【参考方案2】：

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

http://jsbin.com/uyopi

【参考方案3】：

没错，IE6 无法处理 CSS 中的多个类，f.ex：

div.one.twocolor:red

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

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

【讨论】：

我在所有版本上都进行了测试，而不仅仅是 IE6。

【参考方案4】：

使用 toggleClass 代替：

$(document).ready(function()

    $("div.bar").mouseover(function()
            $(this).toggleClass("hover");
        ).mouseout(function()
            $(this).toggleClass("hover");
    );
);

如果不存在则添加类，如果已应用则删除。

并且正确：div.bar.hover 不是 IE6 的有效 CSS 选择器。而是做类似的事情：#myPanel div.hover。