Question

I’m using the following code to hide a division on the page load:

$(document).ready(function() {
    $('#menu1-holder').css('display', 'none');
    });
});

I need to change the CSS class to show the division on mouseover of the division with the class “menu-item kitchens“

I’ve tried the following code but not had any luck with it:

$(document).ready(function() {
    $('#menu1-holder').css('display', 'none');
    $("div.menu-items.kitchens").mouseover(function(){
        $('#menu1-holder').css('display', 'block');
    }).mouseout(function(){
        $('#menu1-holder').css('display', 'none');      
    });
});

Can someone please have a look at the code and give me some pointers?

Answer 1

You could simplify things somewhat, with .hover():

$('#menu1-holder').css('display', 'none');
    $("div.menu-items.kitchens").hover(function(){
        $('#menu1-holder').show();
    },function(){
        $('#menu1-holder').hide();
    });

I strongly suspect that any problems are with the selectors, though, rather than the jQuery methods/functions. The selector $('div.menu-items.kitchens') (a div with a class of ‘menu-items’ and a second class-name of ‘kitchens’) may well be correct, but seems a little over-precise, and possibly erroneous. If you publish your html mark-up that would help refine the solutions, and explain perhaps what was wrong in your own attempt.

References:

• .hover().
• .show().
• .hide().