Jquery mouseover / mouseout IE8 Колебания

Question

У меня есть меню Jquery, которое отображает subnav с помощью jquery .addclass и .css.Я добавляю классы и манипулирую CSS с помощью mouseover и mouseout.В Firefox, Chrome и Safari все работает нормально, но в IE8 кажется, что между классами "мерцает".

Сложно объяснить, но если вы посмотрите на мою ссылку в FF и IE, вы поймете, что я имею в виду.

http://trustmarkstaging.com/

Вот мой jQuery:

<script>

$(document).ready(function(){

$("#nav .item-466").mouseover(function(){
 $("#selector").addClass("item-466-selector");
 $("#nav .menu .current ul li").css("display", "none");
 $("#nav .menu .active ul li").css("display", "none");
 $("#nav .menu .item-466 ul li").addClass("highlight");
});
$("#nav .item-466").mouseout(function(){
 $("#selector").removeClass("item-466-selector");
 $("#nav .menu .current ul li").css("display", "inline");
 $("#nav .menu .active ul li").css("display", "inline");
 $("#nav .menu .item-466 ul li").removeClass("highlight");
});

 $("#nav .item-470").mouseover(function(){
 $("#selector").addClass("item-470-selector");
 $("#nav .menu .current ul li").css("display", "none");
 $("#nav .menu .active ul li").css("display", "none");
 $("#nav .menu .item-470 ul li").addClass("highlight");
});
 $("#nav .item-470").mouseout(function(){
 $("#selector").removeClass("item-470-selector");
 $("#nav .menu .current ul li").css("display", "inline");
  $("#nav .menu .active ul li").css("display", "inline");
 $("#nav .menu .item-470 ul li").removeClass("highlight");
});
$("#nav .item-472").mouseover(function(){
 $("#selector").addClass("item-472-selector");
 $("#nav .menu .current ul li").css("display", "none");
 $("#nav .menu .active ul li").css("display", "none");
 $("#nav .menu .item-472 ul li").addClass("highlight");
});
$("#nav .item-472").mouseout(function(){
 $("#selector").removeClass("item-472-selector");
 $("#nav .menu .current ul li").css("display", "inline");
  $("#nav .menu .active ul li").css("display", "inline");
 $("#nav .menu .item-472 ul li").removeClass("highlight");
});

$("#nav .item-473").mouseover(function(){
 $("#selector").addClass("item-473-selector");
 $("#nav .menu .current ul li").css("display", "none");
 $("#nav .menu .active ul li").css("display", "none");
   $("#nav .menu .item-473 ul li").addClass("highlight");
});
$("#nav .item-473").mouseout(function(){
 $("#selector").removeClass("item-473-selector");
 $("#nav .menu .current ul li").css("display", "inline");
 $("#nav .menu .active ul li").css("display", "inline");
 $("#nav .menu .item-473 ul li").removeClass("highlight");
});

$("#nav .item-474").mouseover(function(){
 $("#selector").addClass("item-474-selector");
 $("#nav .menu .current ul li").css("display", "none");
 $("#nav .menu .active ul li").css("display", "none");
 $("#nav .menu .item-474 ul li").addClass("highlight");
});
$("#nav .item-474").mouseout(function(){
 $("#selector").removeClass("item-474-selector");
 $("#nav .menu .current ul li").css("display", "inline");
 $("#nav .menu .active ul li").css("display", "inline");
 $("#nav .menu .item-474 ul li").removeClass("highlight");
});
});

</script>

Мой CSS:

<style>
#nav .menu li {
list-style: none;
display: inline;
float: left;
border-radius: 10px;
padding: 10px 16px;
margin-left: 3px;
}

.highlight {
display: inline!important;
}
</style>

HTML структурирован так:

<ul id="nav">
<li class="item-466 active">Page 1</li>
    <ul>
        <li>SubPage1</li>
        <li>SubPage2</li>
        <li>SubPage3</li>
    </ul>
<li class="item-470">Page 2</li>
<li class="item-472">Page 3</li>
<li class="item-473">Page 4</li>
</ul>

Любая помощь будет оценена!Заранее спасибо.:)

Answer 1

Проблема в том, что вы используете наведение мыши. Когда указатель мыши находится над элементом, вложенным в верхний уровень LI, он больше не «над» родительским элементом (над дочерним элементом), поэтому он отправляет указатель мыши, но при наведении указателя мыши всплывает от дочернего элемента к родительскому LI. , что заставляет его мигать обратно в состояние наведения мыши.

Попробуйте взглянуть на указатель мыши и отпуск мышью, а не на указатель мыши и указатель мыши.

Кроме того, проблема также очевидна в браузерах, отличных от IE. Я вижу и Chrome, но это вполне ожидаемо.

РЕДАКТИРОВАТЬ: Просто снова посмотрел на страницу в Chrome, и я не вижу мерцание, не уверен, если вы изменили его, или это просто странно. В любом случае, надеюсь, мой ответ поможет.