Jquery Find Div Help

I am currently building a menu bar that consists of icons that show a contextual submenu when hovered over. Essentially, when hovering over an icon a popup menu/tooltip appears (wi

Solution 1:

Not sure I understand completely what you want, but maybe try something a little more like this:

$(".menu-item").hover(
    function() {
        $(this).find(".tip").fadeIn("fast").show(); //add 'show()'' for IE
    },
    function() { //hide tooltip when the mouse moves off of the element
        $(this).find(".tip").hide();
    }
);

Edit: If the tip element is not a child of the menu item div, this could work:

$(".menu-item").hover(
    function() {
        $('#' + this.id + '-tip').fadeIn("fast").show(); //add 'show()'' for IE
    },
    function() { //hide tooltip when the mouse moves off of the element
        $('#' + this.id + '-tip').hide();
    }
);

Solution 2:

Instead of finding the name of the div in the PARENT of the thing you're hovered over, use jQuery to find the tooltip that is a CHILD of the thing you're hovered over...search down the DOM, instead of UP.

Use jQuery's $(this) operator...

$('.menu-item').hover(function(){
     $(this).find('.tip).fadeIn();


},
function() {
    $(this).find('.tip).fadeOut();
});

Solution 3:

I'm not 100% clear on the goal here but you can get your div by ID as shown here:

$(".menu-item").hover(function()
{
    $(this).find(".tip").fadeIn("fast").show();
});

Or in CSS:

.menu-item.tip
{
    display: none;
}

.menu-item.tip:hover,
.menu-item:hover.tip
{
    display: auto;
}