hovering over ul does not work

Question

Does anybody know why hovering over ul elements does not work?

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>

I am trying to hover over the elements in the list and having other elements pop up when hovered over, but somehow it does not work when you hover over the ul "hover-name" element in the fiddle.

Answer 1

You need to apply hover event for last li seperately since your last li doesn't have any anchor with class light :

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

Updated Fiddle

---

If you don't want to follow above way like in your comment, why not just target your li instead of the anchor:

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

Updated Fiddle

Answer 2

delete the

a class='light'

of the other 2 items, and change the

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

to

$('.navi > li')

Answer 3

While @Felix's answer are good. You can also remove a.light from selector:

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