CODEWITHSUNDEEP
javascriptjqueryhover
472084
472084

Reputation: 17894

Jquery detect hover over an element but not the elements contents

Here is the page i am working with: http://jimeagle.com/new/music/

I want to make it so when you hover over a row the image shows and when you leave the row the image shows, but because (i think) the image is in the hover div, the image stays visible when you hover out of the row but over the image.

I tried to move the image out of the hover div but it caused some horrible flickering because when your over the image you are no longer over the hover div.

Any way around this? Thanks.

Upvotes: 1

Views: 1753

Answers (3)

Joram van den Boezem
Joram van den Boezem

Reputation: 1102

Because the image is a child of the element you bind the handlers on, it will prevent the mouseout event being triggered unless the pointer also leaves the container, .music_wrapper in your case.

To work around this, you could create an absolute positioned 'ghost' element with zero opacity and use this for triggering your hover events. Something like this:

$(function() {
    $('.music_wrapper').each(function() {
        var ghost = $(this).find('.music_row').clone();
        ghost.css({opacity: 0, position: 'absolute', overflow: 'hidden' });
        ghost.hover(
            function() { $(this).parent().find('img').show(); },
            function() { $(this).parent().find('img').hide(); }
        );
        $(this).append(ghost);
    });
})

Not tested, but this should recreate your .music_row div element in every .music_wrapper, set some css properties, bind the hover handlers and append it to the wrapper element.

Now image and hover element are seperated, which can hide the image even when the mouse is still over it.

Upvotes: 1

scessor
scessor

Reputation: 16125

Get the height of the div with the class "music_row". If the mouse y-position (on mousemove) is higher then the calculated height, hide the image.

$(document).ready(function() {
    var iHeight = $(".music_row").height();  
    $(".music_wrapper")
        .mouseover(function() {
            $(this).find('.image').show();
        })
        .mousemove(function(o) {
            if (o.layerY > iHeight) {
                $(this).find('.image').hide();
            }
        })
        .mouseout(function() {
            $(this).find('.image').hide();         
        });
});

Also see my jsfiddle.

Upvotes: 1

spike
spike

Reputation: 10014

I would suggest not doing this, actually. I think the intuitive thing is that when you hover over the number / text the image pops up, but moving your mouse inside the image shouldn't do anything.

How about just moving the images to the right a little so that the big numbers are still at least partly visible? Then it would feel natural to move over to the next # to see the next image.

Upvotes: 0

Related Questions