0

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.

Cory Danielson
  • 14,314
  • 3
  • 44
  • 51
GeekedOut
  • 16,905
  • 37
  • 107
  • 185
  • You are trying to make a `hovering functionality`. Can you be more precise about what you want to achieve ? – Benjamin Crouzier Dec 09 '11 at 22:30
  • Your page is currently throwing an exception: `ShowSubCategories is not defined`. The error is coming from this line: `onmouseover="ShowSubCategories(62);"`. Are you missing a JS reference? – James Hill Dec 09 '11 at 22:30
  • @JamesHill got rid of the exception - thanks. – GeekedOut Dec 09 '11 at 22:32
  • @pinouchon I am hoping for hovering on mouse-over on the different categories. – GeekedOut Dec 09 '11 at 22:33
  • Maybe you are confused by the difference between [hover](http://api.jquery.com/hover/), [mouseover](http://api.jquery.com/mouseover/), [mouseenter](http://api.jquery.com/mouseenter/) and [mouseleave](http://api.jquery.com/mouseleave/). Also take a look at this question: [Difference between mouseover and mouseenter](http://stackoverflow.com/questions/1104344/what-is-the-difference-between-the-mouseover-and-mouseenter-events) – Benjamin Crouzier Dec 09 '11 at 22:35
  • Good point - I was confused - those links helped. – GeekedOut Dec 09 '11 at 22:56

1 Answers1

1

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.

Cory Danielson
  • 14,314
  • 3
  • 44
  • 51
  • good point, but I don't really want to display that menu though. How do I only make it displayable on mouse over? – GeekedOut Dec 09 '11 at 22:34
  • If you want it visible by default that's fine, but you won't be able to mouse over it... you'll have to mouse over something else that will display your menu. – Cory Danielson Dec 09 '11 at 22:35
  • If you could describe the functionality you are trying to create, we could definitely help you get it to work. With your current post, it's a little hard to tell what you are trying to create. Do you want the whole menu to appear on hover, or just the first `
  • ` element?
    • – Cory Danielson Dec 09 '11 at 22:52