зависание над ul не работает

Question

Кто-нибудь знает, почему зависание над элементами ul не работает?

http://jsfiddle.net/Samfr/5/

<ul class="navi"> 
    <li> <a class='light'> 
      Item1 
      <div class="hover-name" style="display:none"> 
       Businesses 
      </div> 
     </a> 

    </li> 
    <li> <a class='light'> 
      Item2 
      <div class="hover-name" style="display:none"> 
       Agencies 
      </div> 
     </a> 

    </li> 
    <li>    
     Item3 
     <ul class="hover-name" style="display:none"> 
      <li><a>hello</a></li> 
      <li><a>hello2</a></li> 
     </ul> 
    </li> 
</ul> 

Я пытаюсь парить над элементами в списке и имеющих другие элементы всплывают, когда завис над, но почему-то не работает, когда вы наведите курсор мыши на «зависания-имя» уль элемент в скрипке.

Answer 1

Вам нужно применить событие парения для последнего li отдельно с момента последнего li не имеет якорь с классом light:

$('.navi > li a.light, .navi li:last-child').on("mouseover", function() { 
    $('.hover-name', this).show(); 
}).on("mouseout", function() { 
    $('.hover-name').hide(); 
}); 

Updated Fiddle

---

Если вы не хотите следовать выше, как в вашем комментарии, почему бы не просто нацелить ваш li вместо якоря:

$('.navi > li').on("mouseover", function() { 
    $('.hover-name', this).show(); 
}).on("mouseout", function() { 
    $('.hover-name').hide(); 
}); 

Updated Fiddle

Answer 2

удалить

a class='light' 

из 2 других элементов, а также изменить

$('.navi > li a.light') 

в

$('.navi > li') 

Answer 3

Хотя ответ Филикса хорош. Вы также можете удалить a.light из селектора:

$('.navi > li').on("mouseover", function() { 
    $('.hover-name', this).show(); 
}).on("mouseout", function() { 
    $('.hover-name').hide(); 
});