CODEWITHSUNDEEP
javascriptjqueryhtmlcss
James
James

Reputation: 557

hovering over ul does not work

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.

Upvotes: 0

Views: 64

Answers (3)

lyonsun
lyonsun

Reputation: 47

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();
});

Upvotes: 0

Felix
Felix

Reputation: 38102

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

Upvotes: 4

qiepei
qiepei

Reputation: 26

delete the 

a class='light'

of the other 2 items, and change the 

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

to 

$('.navi > li')

Upvotes: 1

Related Questions