logo标签列表

使用jQuery的鼠标悬停会持续反弹

javascriptjqueryhtmlcss
11

我正在尝试让内容在鼠标悬停时显示并保持可见，因为我计划放一个按钮在那里，但是当我悬停时，隐藏的内容出现了反弹的情况。

jQuery 代码

$('li.employers').mouseover(function () {
    $('.employer_content').show("slow");
    $(this).addClass("bluehover");
});

$('li.employers').mouseout(function () {
    $('.employer_content').hide("fast");
    $(this).removeClass("bluehover");
});

HTML

<li class="employers">
    <div>employer</div>
    <div class="employer_content">some content.</div>
</li>
<li class="court">
    <div>court</div>
    <div class="court_content">some content.</div>
</li>

http://jsfiddle.net/zLdnnxnh/3/

2
既然你只是在更改className并显示/隐藏元素，为什么不使用CSS :hover和transform呢？ - Shilly
9个回答
11

你可以使用CSS来显示/隐藏内容。 你可以利用CSS中的:hover类。

仅使用CSS的演示

.whatwedo {
  padding: 20px;
  color: #fff;
  max-width: 480px;
  margin: 0 auto;
}
ul li {
  list-style-type: none;
}
ul > li {
  background-color: #08588c;
  display: inline-block;
  width: 100%;
  cursor: pointer;
  float: left;
  max-width: 100px;
  padding: 10px;
}
.whatwedo {} ul.wwd_list {
  padding: 0;
  margin: 0;
}
.employer_content,
.court_content,
.companies_content,
.labor_content {
  display: none;
  clear: right;
}
.bluehover {
  background-color: #01395d;
}
.content {
  padding-top: 10px;
  display: none;
}
.wwd_list li:hover .content {
  display: block;
}
<div class="whatwedo">
  <ul class="wwd_list">
    <li class="employers">
      <div>employer</div>
      <div class="content">some content.</div>
    </li>
    <li class="court">
      <div>court</div>
      <div class="content">some content.</div>
    </li>
    <li class="companies">
      <div>companies</div>
      <div class="content">some content.</div>
    </li>
    <li class="laborunion">
      <div>labour union</div>
      <div class="content">some content.</div>
    </li>
  </ul>
</div>

CSS动画演示

如果您仍然想使用jQuery：

  1. 您正在使用触发处理程序的mouseover事件，该事件在鼠标移动到元素上时运行，请改用mousein
  2. 使用hover代替mousein和mouseout
  3. 您的代码不够灵活，可以按以下方式优化代码
  4. 使用stop()停止以前的动画效果

演示

$('.wwd_list li').hover(function() {
  $(this).find('div.content').stop().show("slow");
  $(this).addClass("bluehover");
}, function() {
  $(this).find('div.content').stop().hide("slow");
  $(this).removeClass("bluehover");
});
.whatwedo {
  padding: 20px;
  color: #fff;
  max-width: 480px;
  margin: 0 auto;
}
ul li {
  list-style-type: none;
}
ul > li {
  background-color: #08588c;
  display: inline-block;
  width: 100%;
  cursor: pointer;
  float: left;
  max-width: 100px;
  padding: 10px;
}
.whatwedo {} ul.wwd_list {
  padding: 0;
  margin: 0;
}
.employer_content,
.court_content,
.companies_content,
.labor_content {
  display: none;
  clear: right;
}
.bluehover {
  background-color: #01395d;
}
.content {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="whatwedo">
  <ul class="wwd_list">
    <li class="employers">
      <div>employer</div>
      <div class="content">some content.</div>
    </li>
    <li class="court">
      <div>court</div>
      <div class="content">some content.</div>
    </li>
    <li class="companies">
      <div>companies</div>
      <div class="content">some content.</div>
    </li>
    <li class="laborunion">
      <div>labour union</div>
      <div class="content">some content.</div>
    </li>
  </ul>
</div>

7
您可以使用hover代替mouseover和mouseout。类似这样：

$('li.employers').hover(function () {
    $('.employer_content').show("slow");
    $(this).addClass( "bluehover" );
    console.log('mouse in');

}, function() {
    $('.employer_content').hide("slow");
    $(this).removeClass( "bluehover" );
    console.log('mouse out');
});

Here's an example

4
1
你在“Companies”中漏掉了一个替换。 - dberm22
3

这个怎么样：这里?

你可以使用 stop() 停止动画，并从停止的地方继续新的动画。

$('.employer_content').stop().show("slow");
$('.employer_content').stop().hide("slow");

建议使用mouseenter而不是mouseover

。

2

尝试使用mouseenter和mouseleave代替：

来自https://api.jquery.com/mouseover/：

由于事件冒泡，此事件类型可能会引起许多问题。例如，在此示例中，当鼠标指针移动到内部元素上时，将向其发送mouseover事件，然后向上溢出到外部。这可能会在不适当的时间触发我们绑定的mouseover处理程序。有关一个有用的替代方法，请参见.mouseenter()的讨论。

$('li.employers').mouseenter(function () {
    $('.employer_content').show("slow");
    $(this).addClass("bluehover");
});

$('li.employers').mouseleave(function () {
    $('.employer_content').hide("fast");
    $(this).removeClass("bluehover");
});

http://jsfiddle.net/zLdnnxnh/5/

2

只需从您的隐藏函数中删除fast。它是有效的。检查此fiddle：http://jsfiddle.net/zp3jr43u/

Javascript代码应该如下所示。

$('li.employers').mouseover(function () {
    $('.employer_content').show("slow");
    $(this).addClass("bluehover");
});

$('li.employers').mouseout(function () {
    $('.employer_content').hide();
    $(this).removeClass("bluehover");
});
1
某种情况下，鼠标悬停事件会被多次触发。在切换元素之前，我使用了 .stop() 方法使其正常工作。

http://jsfiddle.net/zLdnnxnh/4/

1

没有必要为每个列表项都单独创建类。即使使用这些单独的类，下面的代码也应该轻松上手。

$('.wwd_list li').hover(function () {
    $('div:last-child',this).show("slow");
    $(this).addClass( "bluehover" );  
}, function(){
   $('div:last-child',this).hide("slow");
   $(this).removeClass( "bluehover" );
});

请注意，您只需要使用一个hover函数而不是mouse in和mouse out。这是因为在wwd_list类中有两个div，最后一个恰好是您要定位的div。因此，如果您想要更改某些内容，请小心！
1

将mouseover替换为mouseenter，将mouseout替换为mouseleave。

查看更加分解的形式：

$('li').on({
  mouseenter: function() {
    jQuery("div.content", this).show('slow');
    $(this).addClass( "bluehover" );
  },
  mouseleave: function() {
    jQuery("div.content", this).hide('fast');
    $(this).removeClass( "bluehover" );
  }
});

每个内容div都添加了content class。

查看更新的fiddle

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接