CODEWITHSUNDEEP
jquery
GeekedOut
GeekedOut

Reputation: 17185

How to properly make jQuery hover work

I have this test page: http://www.problemio.com/index_new.php

and I am trying to make some jQuery for hovering functionality. But I am not exactly sure how to go about it. Have some jQuery code like this:

$('ul#environment li').hover(function() {
    $(this).find('ul:first-child').show();
}, function() {
    $(this).find('ul:first-child').hide();
});

$('ul#health li').hover(function() {
    $(this).find('ul:first-child').show();
}, function() {
    $(this).find('ul:first-child').hide();
});

and HTML on the page like this:

        <div style="display:none;">
            <ul id="environment" >
                <li>Green Lifestyle</li>
                <li>Energy Use</li>
            </ul>
            <ul id="health">
                <li>Medicine</li>
                <li>Diet</li>
            </ul>
        </div>

and then I have some HTML links that I want to display the appropriate hover effect when the user mouses over.

How do I do that? I seem to have seperate pieces of the functionality, but not sure how to make it all play together.

Upvotes: 0

Views: 125

Answers (1)

Cory Danielson
Cory Danielson

Reputation: 14501

You can't hover over something that isn't displayed.

<div style="display: none;">

Because you have display: none;, your menu is not visible/hoverable. Remove this, and then you can start to work from there.

Upvotes: 1

Related Questions