CODEWITHSUNDEEP
jqueryhtml
supersize
supersize

Reputation: 14773

prevent element from cancel hover

I have a simple .hover on a text element:

$('#menu_1').hover(function() { 
    $('#overlay_1').fadeIn('slow');
       }, function() { 
    $('#overlay_1').fadeOut('slow');
});

what happens is, that an element displays over the text element. But this element bothers the .hover() because the cursor is now on the new displayed element, not on the text anymore. Is there a way to prevent this?

to mention: I want the displayed element above the text

Upvotes: 0

Views: 43

Answers (2)

Hans Roerdinkholder
Hans Roerdinkholder

Reputation: 3000

You can solve this through css. Give the element that appears on top the following style rule: pointer-events: none;

This way the cursor will 'ignore' the element and your hover-effect still works. However, this does mean the element on top is no longer clickable.

Edit:

#overlay_1 {
    pointer-events: none;
}

http://jsfiddle.net/c8fqvbcp/2/

Edit: I wasn't aware of it, but it was pointed out to me browser support isn't ideal: http://caniuse.com/#search=pointer-events

Upvotes: 0

James Donnelly
James Donnelly

Reputation: 128791

You'll can just place the #overlay_1 element inside your #menu_1 element so that even when you're hovering over #overlay_1 you're still hovering over #menu_1 as well.

<elem id="menu_1">
    <elem id="overlay_1"></elem>
</elem>

JSFiddle demo.

Upvotes: 1

Related Questions