Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by williamrossi
williamrossi
6,232 Points

hover state classes on dropdown menu

Hi all, I have created a simple dropdown

$('.ebook-button').parent().css('padding-bottom', '0');
$('.ebookRollover').hide()
    $('.ebook-button').mouseenter(function(){
        $('.ebook-button').next().show();
        $('.ebook-button').addClass('active');
        canvasresize();
    });

So upon hover of my button, a dropdown menu appears, this was working fine but I am getting one result that is returning 2 listings with ebook titles. So now both dropdown menu appears upon hover. I can't go in and hardcode any new classes as I can't control what results I get.

What is a simple jquery fix for this?

thanks in advance!

5 Answers

Stephen Goeddel
Stephen Goeddel
11,239 Points

using the this keyword should fix your problem: 

$('.ebook-button').parent().css('padding-bottom', '0');
$('.ebookRollover').hide()
    $('.ebook-button').mouseenter(function(){
        $(this).next().show();
        $(this).addClass('active');
        canvasresize();
    });

It will target the specific "instance" of your class, which is the one that you want when the mouseenter event gets triggered.

williamrossi
williamrossi
6,232 Points
williamrossi
williamrossi
6,232 Points

Thanks Stephen!

williamrossi
williamrossi
6,232 Points
williamrossi
williamrossi
6,232 Points

When I do this though, the menu disappears before I can hover over it?

Stephen Goeddel
Stephen Goeddel
11,239 Points
Stephen Goeddel
Stephen Goeddel
11,239 Points

I have no idea how your HTML is structured, but you need to make sure that you are using the mouseenter event on an element that is an ancestor of your menu, or else the mouse will no longer be on your element when you try to move it to the menu.

williamrossi
williamrossi
6,232 Points
williamrossi
williamrossi
6,232 Points

Thanks Stephen. This is my html <a class="button ebook-button" style="width: 150px;">Get the E-book ...</a> <ul class='ebookRollover'> <li><a href='#'>Amazon</a></li> <li><a href='store1'>store1</a></li> <li><a href='store2'>store2</a></li> <li><a href='store3'>store3</a></li> <li><a href='store4'>store4</a></li> <li><a href='store5'>store5</a></li> </ul>

I have tried a few ways but just can't solve it. I'm going to come back to it, getting too stressed lol