Mouse hover using jQuery keeps bouncing

Question

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/

Answer 1

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

Demo using CSS only

.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

If you still want to use jQuery:

1. You are using mouseover event that is causing the handler to run when the mouse is moved over the element, use mousein instead
2. Use hover instead of mousein and mouseout
3. Your code is not flexible, you can optimize your code as follow
4. Use stop() to stop the previous animations

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>

Answer 2

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

Answer 3

How about this?

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

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

As recommended by others, use mouseenter than mouseover

Answer 4

Replace mouseover function with mouseenter and mouseout with mouseleave.

You can see this fiddle is working.

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