1

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

5 回答 5

2

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

在你的情况下：

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

见悬停

于 2013-08-16T19:18:05.673 回答
2

Hover 有两个功能：hover IN 和 hover OUT。

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

来源：jQuery api

于 2013-08-16T19:12:53.157 回答
1

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

<script type="text/javascript">
jQuery(".cat").hover(
  function() {
     jQuery(this).addClass('show').siblings().removeClass('show');
  },
  function() {
     //mouseout stuff
  }
);
</script>`
于 2013-08-16T19:13:01.750 回答
1

.hover通常需要 2 个 args 函数mouseenter和mouseleave事件。

但是.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>
于 2013-08-16T19:14:01.807 回答
0

您还需要附加“mouseout 事件”

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

});

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

你也可以这样做

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

然后附加鼠标悬停

$(selector).mouseout(function () { remove the class here});
于 2013-08-16T19:15:27.733 回答