Question

我有这个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>

Answer 1

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

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

来源：jQuery api

Answer 2

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

在你的情况下：

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

请参阅Hover

Answer 3

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

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

Answer 4

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

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

尝试如下，

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

Answer 5

您还需要附加“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});

jquery删除悬停删除类名

5 个答案: