jquery删除悬停删除类名

时间:2013-08-16 19:09:36

标签: jquery class hover

我有这个jQuery代码,在悬停时用<li class="cat">替换类名<li class="cat show">。在我徘徊之后它仍然是一样的。 removeClass代码出了什么问题?

JS

jQuery(".cat").hover(function({
    jQuery(this).addClass('show').siblings().removeClass('show');
});

HTML

<ul> 
    <li class="cat"><a>Motors</a>    
        <ul> 
            <li>Top categories</li> 
            <li> <a href="" aria-haspopup="false">Cars</a></li>
            <li> <a href="" aria-haspopup="false">Motorcycles</a></li> 
            <li> <a href="" aria-haspopup="false">Parts</a></li> 
        </ul> 
    </li>
</ul>

5 个答案:

答案 0 :(得分:2)

Hover有两个功能:悬停IN和悬停OUT。

jQuery(".cat").hover(
  function() { 
    jQuery(this).addClass('show'); 
  },
  function() { 
    jQuery(this).removeClass('show'); 
  }
);

来源:jQuery api

答案 1 :(得分:2)

jQuery中的悬停事件需要2个回调函数:一个指针在项目上移动时,一个在它离开时:

在你的情况下:

jQuery(".cat").hover(
   function() {
      jQuery(this).addClass('show');
   },
   function() {
      jQuery(this).removeClass('show');
   }
);

请参阅Hover

答案 2 :(得分:1)

jQuery悬停函数有两个函数。首先是鼠标悬停功能,第二个是mouseout功能。要定义mouseout函数,只需在第一个函数后添加一个逗号并写下第二个函数。

<script type="text/javascript">
jQuery(".cat").hover(
  function() {
     jQuery(this).addClass('show').siblings().removeClass('show');
  },
  function() {
     //mouseout stuff
  }
);
</script>`

答案 3 :(得分:1)

.hover通常会为mouseentermouseleave事件提供2个args功能。

但是.hover也支持1个函数arg,它基本上在mouseentermouseleave上执行相同的处理程序。

尝试如下,

<script type="text/javascript">
  jQuery(".cat").hover(function()  { //mouse enter 
     jQuery(this).addClass('show'); 
  }, 
  function () { //mouse leave 
      jQuery(this).removeClass('show');
  });
</script>

答案 4 :(得分:0)

您还需要附加“mouseout事件”

$(function(){
$("selector").hover(function(){
//add class here
}, function(){
    //remove class here
});

});

基本上需要两个参数 使用悬停事件就像添加mouseenter和mouseout事件一样

你也可以这样做

$(selector).mouseenter(function () {  add my class here});

然后附加mouseout

$(selector).mouseout(function () { remove the class here});