jQuery: How to disable hover on parent element when hovering over child element?

Question

So I have some HTML like this:

<a class="tooltip" title="my tool tip">
    Hover over me for a tool tip!
</a>

the javascript changes the html into something like this:

<a class="tooltip">
    Hover over me for a tool tip!
    <span style="position:absolute; display:none;">my tool tip</span>
</a>

When hovering over the parent element, the javascript triggers the child element to display. The child element is positioned so that it looks like it is not inside the parent element, so hovering over the child element still causes the child element to be displayed. I want to only show the child element when you are not hovering over it.

How can I do this?

Is zero visibiliy enough or should the user be able to click 'through' the position of the tooltip, on links and the like? — Wrikken
– Wrikken, Commented Jul 21, 2011 at 20:42
I think this would be a lot easier to understand if you put it in a jsfiddle — citizen conn
– citizen conn, Commented Jul 21, 2011 at 20:43
With display:none, there shouldn't BE anything to hover over in the child element. — Marc B
– Marc B, Commented Jul 21, 2011 at 20:43

wanovak · Accepted Answer · 2011-07-21 20:47:40Z

3

Use event delegation:

$('.tooltip').hover(function(e){
    if($(e.target).is('span')){
        // your child span is being hovered over
        e.stopPropagation();
    }else if($(e.target).is('.tooltip')){
        // your parent element is being hovered over
    }
});

Though, as noted in the comments to your post, you can't hover over something with display: none as a style property.

answered Jul 21, 2011 at 20:47

wanovak

6,12727 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

vinceh · Accepted Answer · 2011-07-21 20:54:00Z

0

Looking at your question, you are appending the span to the a. And I think you want something like this? I'm not quite sure because your question isn't super clear.

answered Jul 21, 2011 at 20:54

vinceh

3,5101 gold badge23 silver badges24 bronze badges

Collectives™ on Stack Overflow

jQuery: How to disable hover on parent element when hovering over child element?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related