Nested elements hover handle

Question

All, I am stuck with a problem which deal with the nested element hover handler. It seems When the mouse enter the child div , the ancestors are also in hover state, Is there any ways trigger the hoverout event of ancestors ,when mouse enter the child element?

Below is what I trying to make it so far. please review it .

<style>
div
{
    border:1px solid red;
    margin:10px;
    padding:10px;
}
</style>


  <script>
      $(function() {
           $('div').each(function(){
             var current = this;
             $(this).hover(function(event){
                event.stopPropagation();// doesn't work.
                console.log('Capture for hover in ' + current.tagName + '#'+ current.id +
                    ' target is ' + event.target.id); },
               function(event){
                  event.stopPropagation();
                  console.log('Capture for hover out' + current.tagName + '#'+ current.id +
                    ' target is ' + event.target.id); });

                            });
                        });
 </script>

 <body id="greatgrandpa">                        
        <div id="grandpa">
               <div id="parent">
                  <div id="child"/>
               </div>
        </div>
 </body>

Just remove the asterix and run the function on the image? You're attaching event handlers inside a loop that iterates over ***all*** the elements on the page! — adeneo, Mar 19 '13 at 03:22
Hi, @adeneo, I just update the question to make it clearly . please review it .thanks. — Joe.wang, Mar 19 '13 at 03:30
I really don't get it, but you can set the mouseenter / leave functions to anything you'd like, like this [**FIDDLE**](http://jsfiddle.net/FXU65/) ?? — adeneo, Mar 19 '13 at 03:37
Hi , @adeneo, just image this, what if we don't how many nested div element in body? maybe the child has nest element. I just demo a simple case . thanks. — Joe.wang, Mar 19 '13 at 03:50

score 5 · Accepted Answer · answered Mar 19 '13 at 03:54

5

The .hover() method binds handlers for both mouseenter and mouseleave events. You can use it to simply apply behavior to an element during the time the mouse is within the element.

However, if you employ the mouseover and mouseout events, these events are trigger when the mouse moves in and out of elements AND it's descendants.

See http://jsfiddle.net/5yQY5/ for an alternative attempt of your example.

answered Mar 19 '13 at 03:54

Cue

2,699
1
12
13

It is making me confused before I got your answer.Thanks , – Joe.wang Mar 19 '13 at 04:01

score 1 · Answer 2 · answered Mar 19 '13 at 03:38

1

Use mouseover and mouseout events instead

$(function() {
    $('div').on('mouseover', function(e){
        e.stopPropagation();
        $(this).addClass('my-bg');
    }).on('mouseout', function(e){
        $(this).removeClass('my-bg');
    })
});

Demo: Fiddle

Note: There is no need to iterate through each div and then add the event handler for each of them, you can just call $('div').hover(...), it will register hover handler for all divs

answered Mar 19 '13 at 03:38

Arun P Johny

384,651
66
527
531

Hi , @Arun P Johny , could you please tell me the difference between `hoverin hoverout` and `mouseover mouseout`? thanks. – Joe.wang Mar 19 '13 at 03:57
you can look at some posts like this one http://stackoverflow.com/questions/1104344/what-is-the-difference-between-the-mouseover-and-mouseenter-events – Arun P Johny Mar 19 '13 at 04:07

score 1 · Answer 3 · answered Mar 19 '13 at 03:41

1

You need to find if target DOM is child or not.

Example

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

answered Mar 19 '13 at 03:41

Dipesh Parmar

27,090
8
61
90

@Joe.wang always welcome...I just tried to answer according to your code so i thought why edit code give the solution that fits with current code.. – Dipesh Parmar Mar 19 '13 at 03:54

Nested elements hover handle

3 Answers3