鼠标悬停使用jQuery保持弹跳

I am trying to make a show content on mouseover and make it stay visible while the mouse is hovered on the list since I am planning to put a button there, but when I do hover, hidden content kept bouncing for some reason.

我试图在鼠标悬停时制作节目内容,并使鼠标悬停在列表上时保持可见,因为我打算在那里放一个按钮,但是当我悬停时,隐藏的内容因某些原因而保持弹跳。

jQuery code

$('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/

9 个解决方案

#1

You can use hover instead of mouseover and mouseout. Something like this:

您可以使用悬停而不是鼠标悬停和鼠标移除。像这样的东西:

$('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

这是一个例子

#2

You can use only CSS to show/hide the contents. You can take advantage of :hover class in CSS.

您只能使用CSS来显示/隐藏内容。您可以利用:CSS中的悬停类。

Demo using CSS only

仅使用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 Demo with Animation

带动画的CSS演示

If you still want to use jQuery:

如果你还想使用jQuery:

You are using mouseover event that is causing the handler to run when the mouse is moved over the element, use mousein instead

您正在使用鼠标悬停事件导致处理程序在鼠标移动到元素上时运行,而是使用鼠标

Use hover instead of mousein and mouseout

使用悬停而不是mousein和mouseout

Your code is not flexible, you can optimize your code as follow

您的代码不灵活,您可以按照以下方式优化代码

Use stop() to stop the previous animations

使用stop()停止以前的动画

Demo

$('.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>

#3

How about this?

这个怎么样?

You can use stop() to stop the animation and continue the new animation from where it has stopped

您可以使用stop()来停止动画并从停止的位置继续新动画

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

As recommended by others, use mouseenter than mouseover

根据其他人的建议,使用mouseenter而不是mouseover

#4

Replace mouseover function with mouseenter and mouseout with mouseleave.

使用mouseenter和mouseleave鼠标输出替换鼠标悬停功能。

You can see this fiddle is working.

你可以看到这个小提琴正在运作。

http://jsfiddle.net/ebilgin/zLdnnxnh/7/

#5

Try using mouseenter and mouseleave instead:

尝试使用mouseenter和mouseleave代替:

From https://api.jquery.com/mouseover/:

This event type can cause many headaches due to event bubbling. For instance, when the mouse pointer moves over the Inner element in this example, a mouseover event will be sent to that, then trickle up to Outer. This can trigger our bound mouseover handler at inopportune times. See the discussion for .mouseenter() for a useful alternative.

由于事件冒泡,此事件类型可能会导致许多令人头疼的问题。例如,当鼠标指针在此示例中移动到Inner元素上时,鼠标悬停事件将被发送到该元素,然后涓涓细流到外部。这可以在不合适的时间触发我们绑定的鼠标悬停处理程序。有关有用的替代方法,请参阅.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/

#6

Just remove fast from your hide function. It is WORKING. Check this fiddle: http://jsfiddle.net/zp3jr43u/

只需从隐藏功能中快速删除即可。这是工作。检查这个小提琴:http://jsfiddle.net/zp3jr43u/

The JavaScript code should like the following.

JavaScript代码应如下所示。

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

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

#7

Somehow the mouseover event gets triggered multiple times. I got it working by using the .stop() method before toggling the element.

不知何故,mouseover事件被多次触发。我在切换元素之前使用.stop()方法使它工作。

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

#8

There's no need to have separate classes for each list item you have. Even with these separate classes the code below should get you up and running with ease.

您没有必要为每个列表项都有单独的类。即使使用这些单独的类,下面的代码也可以轻松启动并运行。

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

Note the fact that you only need to use one hover function instead of mouse in and mouse out. This works because you have two divs in the wwd_lsit class and the last one just so happens to be the one you want to target. So be careful with this if you ever want to change something!

请注意,您只需要使用一个悬停功能而不是鼠标和鼠标移出。这是有效的,因为你在wwd_lsit类中有两个div,而最后一个恰好是你想要定位的那个。如果你想要改变一些东西,那么要小心!

#9

Replace mouseover with mouseenter and mouseout with mouseleave.

用mouseenter和鼠标输出鼠标移除鼠标悬停。

See a more factorised form :

查看更加分解的形式:

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

(content class has been added to each content divs)

(内容类已添加到每个内容div)

See the updated fiddle

查看更新的小提琴

#1