Question

Let’s say if my mouse moves out from elementA and hovers over to elementB.

What will be the order of the events getting fired?

Answer 1

mousemove, mouseleave, mouseout, mousemove x X, mouseenter, mouseover, mousemove some more etc…

That’s my best guess…

But I was slightly wrong. This should do it for you: Add the events you need (the example uses jQuery, you could do this in plain JavaScript too, but I didn’t want to spend a lot of time on this).

Ok, here’s the code:

$(document).ready(function(e) {
    $('.canary').on('mouseout mouseleave mouseenter mouseover', function(event){
        $('#test').text($('#test').text() + ', ' + event.type)      });
});

Here’s your CSS:

.canary{
    width:200px;
    height:100px;
    background-color:#066
    }

Your HTML

<textarea name="test" id="test" cols="200" rows="10"></textarea>
<div class='canary'></div>
<br /><br />
<div class='canary'></div>

Here’s a live demo