使用jQuery悬停 [英] Hover using jQuery

问题描述

为了允许对块元素的悬停效果（比如 div ）在IE中，我想用jQuery来取代css。我的jQuery代码如下所示：

  
 $（document）.ready（function（）
 { 
 $（div.foo）。mouseover（function（）{
 $（div.foo h3）。addClass（hover）; 
}）。 （）{
 $（div.foo h3）。removeClass（hover）; 
}）; 
}）; 
  

这可以用作我的标题在 h3 如果我尝试： $ b

 < code 
 $（document）.ready（function（）
 {
 $（div.bar）。mouseover（function（）{
 $（this ）.addClass（hover）; 
}）。mouseout（function（）{
 $（this）.removeClass（hover）; 
}）; 
} ）; 
  

这在所有版本的IE 中都不起作用。这是否意味着IE无法检测1个元素上的多个类（它是 div.bar.hover ）？提前致谢。

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

<使用toggleClass代替：

  $（document）.ready 
 （function（）
 {
 $（div.bar）。mouseover（function（）{
 $（this）.toggleClass（hover）; 
}） .mouseout（function（）{
 $（this）.toggleClass（hover）; 
}）; 
}）; 
  

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

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

Having a bit of problem debugging my jQuery code...

In order to allow hover effects on block elements (such as div) in IE, I want to use jQuery to do the trick instead of css. My jQuery code looks something like:

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

This works as my header switch between h3 and h3.hover, BUT if I try to:

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

This won't work in all versions of IE. Does it mean IE has trouble detecting multiple classes on 1 element (which is div.bar.hover)? Thanks in advance.

EDIT:

After examined the code, I realised the problem lies in a conflict with javascript curvycorners-2.0.4 (which is another IE hack) that were also applied to this element.

解决方案

use toggleClass instead:

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

It will add class if not there, and remove if already applied.

And correct: div.bar.hover is not valid CSS selector for IE6. instead do something like that: #myPanel div.hover.

这篇关于使用jQuery悬停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！