Почему CSS hover state удален?

-1

Я создал простую навигацию и вспомогательную навигацию (активирован после наведения на родительский элемент), но в моем проекте, когда я нахожусь на последнем дочернем элементе субнавигации, активный класс удален. Не удалось выяснить проблему. Пожалуйста помоги.Почему CSS hover state удален?

Вот код и JSFIDDLE

HTML

<div class="menu-nav"> 

    <ul> 
     <li><a href="" class="current_user"> <span class="user_image"></span>Hi, Inderjeet<b class="caret"></b></a></li> 
     <li><span class="bookings">Bookings<b class="caret"></b> 
      <ul class="dropdown_menu"> 
       <li><a href="#">Booking 1</a></li> 
       <li><a href="#">Booking 2</a></li> 
       <li><a href="#">Booking 3</a></li> 
      </ul> 
     </span></li> 
     <li><span class="hosting">Hosting<b class="caret"></b> 
      <ul class="dropdown_menu"> 
       <li><a href="#">Booking 1</a></li> 
       <li><a href="#">Booking 2</a></li> 
       <li><a href="#">Booking 3</a></li> 
      </ul> 
     </span></li> 


    </ul> 
</div>

CSS

.menu-nav{float:left; } 
.menu-nav > ul > li{ display: inline-block; vertical-align: middle; -webkit-vertical-align: middle; -moz-vertical-align: middle; margin-left: 10px; margin-top: 25px; } 
.menu-nav > ul > li > a, .menu-nav > ul > li > span{color:#4d4d4d; font-size: 16px; padding:5px; position: relative;} 

ul.dropdown_menu{display: none; position: absolute; top: 0px; left: 0; padding-top:40px; padding-bottom: 20px; width: 200px;} 
ul.dropdown_menu > li > a {color:#4d4d4d; padding:10px; display: block; background:#fff;} 
ul.dropdown_menu.activemenu{display: block;} 
ul.dropdown_menu.activemenu li a:hover{background:red;}

JQuery

$('.menu-nav ul li span').hover(function(){ 
     $(this).find('ul.dropdown_menu').toggleClass('activemenu'); 
    });

JSFIDDLE

источник

2015-10-23 Inderjeet Singh Ahuja

Не совсем уверен, что проблема есть. Fiddle, кажется, работает нормально, нет никакой разницы, когда он зависает над первым ребенком по сравнению с последним ребенком. Можете ли вы объяснить, что он делает и что вы хотите, пожалуйста? –

В Fiddle он работает отлично, но в моем проекте он не работает. Я также удалил Reset css –

И скрипка соответствует коду в вопросе? Именно с чем мы должны помогать? «У меня есть другой код, который я не собираюсь показывать вам, который не работает, но вот немного связанный код, который отлично работает» - так что? –

Вы должны сделать парить на элемент LI не пролете:

$('.menu-nav > ul > li').hover(function(){

и ул не должно быть в пролете в HTML

источник

2015-10-23 12:16:00

Привет, я попытался навести палочку li, но он не работает –

который браузер вы используете и в какой операционной системе. –

MAC OSX 10.10, браузер Chrome –

Hi теперь попробуйте таким образом

mouseenter и mouseleave

$(".menu-nav ul li span").on({ 
    mouseenter: function() { 
     $(this).find('ul.dropdown_menu').addClass('activemenu'); 
    }, 
    mouseleave: function() { 
     $(this).find('ul.dropdown_menu').removeClass('activemenu'); 
    } 
});

Demo

Или теперь вы можете использовать для CSS

.menu-nav ul li span:hover ul.dropdown_menu{ 
    display: block; 
}

источник

2015-10-23 12:22:51

Почему CSS hover state удален?

ответ

Смежные вопросы