Наведение мыши с использованием jQuery продолжает подпрыгивать

Ответ 1

Вы можете использовать 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');
});

Вот пример

Ответ 2

Вы можете использовать только CSS, чтобы отображать/скрывать содержимое. Вы можете использовать класс :hover в CSS.

Демо с использованием только 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>

Ответ 3

Замените mouseover функцией mouseenter и mouseout на mouseleave.

Вы можете видеть, что эта скрипка работает.

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

Ответ 4

Как насчет this?

Вы можете использовать stop(), чтобы остановить анимацию и продолжить новую анимацию с того места, где она остановилась.

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

Как рекомендовано другими, используйте mouseenter, чем mouseover

Ответ 5

Попробуйте использовать mouseenter и mouseleave:

Из https://api.jquery.com/mouseover/:

Этот тип события может вызвать много головных болей из-за пузырьков событий. Для например, когда указатель мыши перемещается по Внутреннему элементу в этом Например, событие с указателем мыши будет отправлено на это, а затем просочиться до Outer. Это может привести к тому, что связанный обработчик привязки раз. См. Обсуждение для .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

Просто удалите fast из вашей функции hide. Это РАБОТА. Проверьте эту скрипту: 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");
});

Ответ 7

Как-то событие mouseover срабатывает несколько раз. Я начал работать с использованием метода .stop() перед переключением элемента.

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

Ответ 8

Нет необходимости иметь отдельные классы для каждого элемента списка, который у вас есть. Даже с этими отдельными классами код, приведенный ниже, должен легко запускаться и работать.

$('.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 вместо мыши и мыши. Это работает, потому что у вас есть два div в классе wwd_lsit, а последний - именно так, что вы хотите настроить таргетинг. Поэтому будьте осторожны, если вы когда-нибудь захотите что-то изменить!

Ответ 9

Замените 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" );
  }
});

(класс контента добавлен в каждый раздел содержимого)

См. обновленную скрипту