mouseenter() on two element creating jerk in sliding of element

Question

Hi I am trying to bind mouseenter event of jquery on two different elements on event firing div3 slide. But when cursor move from div1 to div2, div3 first slide up and then slide down.

Fiddle: http://jsfiddle.net/gzcnouux/

Expected Behaviour: Div only slide up when cursor is out of both the div

Namaskar · Accepted Answer · 2017-09-20T14:31:57.483

2

There are a lot of different ways to accomplish this, but to illustrate the point, the mouseleave event is triggered before the mouseenter which causes the div to slide down and up. You can do a simple check on the relatedTarget.

if (e.relatedTarget && e.relatedTarget.id != 'd2' && e.relatedTarget.id != 'd1')
    $('#d3').slideUp();

ID Fiddle

A more maintainable way using classList and its contains method.

if (e.relatedTarget && !e.relatedTarget.classList.contains('box'))
    $('#d3').slideUp();

Class Fiddle

edited Sep 20 '17 at 14:31

answered Sep 20 '17 at 14:17

Namaskar

2,114
1
15
29

I was writing the same answer. You were faster :) Perfect answer. welldone. – Matthew Barbara Sep 20 '17 at 14:21
@Sven, great ! Does this work on all browser? Can you update the answer for class as well, as I used id just for quick fiddle – Master.Deep Sep 20 '17 at 14:23
@MatthewBarbara, typing speed always give you benifit ;) – Master.Deep Sep 20 '17 at 14:24
@Master.Deep , use this for classes: `if(e.relatedTarget && e.relatedTarget.className != 'd2' && e.relatedTarget.className != 'd1)'` – Mihai Alexandru-Ionut Sep 20 '17 at 14:25
@Master.Deep, If your elements contains many classes you must to check if includes `d1` or `d2`. That can be achieved using `classList` and `includes` methods.`if(e.relatedTarget && e.relatedTarget.classList.includes('d2') && e.relatedTarget.classList.includes('d1')`. `includes` is a feature of `ES6`. – Mihai Alexandru-Ionut Sep 20 '17 at 14:26
@Master.Deep I've updated it for classes (assuming they all have the same class). – Namaskar Sep 20 '17 at 14:32
no they dont have. And sorry I don't have access to HTML – Master.Deep Sep 20 '17 at 14:36
@Master.Deep without seeing the HTML, I can't help. If there are few enough elements which won't be added/deleted or dynamically changed, you can use Alexandru-lonut Mihai's suggestion. Otherwise, you need to find something else all the affected elements have in common. – Namaskar Sep 20 '17 at 14:49
The divs are located in one common div ? – Mihai Alexandru-Ionut Sep 20 '17 at 14:52
I solved it with some changes. Thanks both for Help. – Master.Deep Sep 21 '17 at 01:44
1

@Alexandru-IonutMihai , +1 for you too :) – Master.Deep Sep 21 '17 at 01:45

Mihai Alexandru-Ionut · Answer 2 · 2017-09-20T14:22:51.343

1

You can use mouseover event.

You should bind mouseover event for document DOM element and check if is not d1 or d2.

This can be achieved using event.target property in order to find out the DOM element that initiated the event.

$(document).on('mouseover', function(e) {
    if(e.target.id!='d1' && e.target.id!='d2')
       $('#d3').slideUp();
});

See full working solution.

edited Sep 20 '17 at 14:22

answered Sep 20 '17 at 14:17

Mihai Alexandru-Ionut

47,092
13
101
128

Whhy mouseover instead of mousenter – Master.Deep Sep 20 '17 at 14:21
This is not mandatory for use `mouseover`. This is how is works my example. – Mihai Alexandru-Ionut Sep 20 '17 at 14:22
But see differences here : https://stackoverflow.com/questions/7286532/jquery-mouseenter-vs-mouseover – Mihai Alexandru-Ionut Sep 20 '17 at 14:23
So as per that question mouseover fire inside the element as well if moved to child. while mousenter take all as single event – Master.Deep Sep 20 '17 at 14:26
@Master.Deep, yes, Each time your mouse enters or leaves a child element, mouseover is triggered, but not mouseenter. – Mihai Alexandru-Ionut Sep 20 '17 at 14:30

mouseenter() on two element creating jerk in sliding of element

2 Answers2