基于jQuery的悬停
基于jQuery的悬停
提问于 2009-11-21 09:59:34
调试我的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在一个元素(即div.bar.hover)上检测多个类有困难？提前谢谢。
编辑：
在检查了代码之后，我意识到问题在于与javascript curvycorners-2.0.4 (这是另一个IE攻击)之间的冲突，后者也被应用于这个元素。
回答 4
Stack Overflow用户
回答已采纳
发布于 2009-11-21 10:09:37
使用toggleClass代替：
$(document).ready(function()
{
$("div.bar").mouseover(function(){
$(this).toggleClass("hover");
}).mouseout(function(){
$(this).toggleClass("hover");
});
});如果不存在，它将添加类，如果已经应用，则删除类。
更正：div.bar.hover不是IE6的有效CSS选择器。相反，可以这样做：#myPanel div.hover。
Stack Overflow用户
发布于 2009-11-21 13:58:48
甚至更短：
$('div.bar').on('mouseenter mouseleave', function () {
$(this).toggleClass('hover');
});Stack Overflow用户
发布于 2009-11-21 10:04:17
是的，IE6不能处理CSS中的多个类，f.ex：
div.one.two{color:red}<div class="one two">red</div>不起作用
更新：可能也是一个冒泡的问题，请尝试使用.hover助手http://docs.jquery.com/Events/hover来防止这种情况。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/1775068
复制相关文章
相似问题
腾讯云开发者
