1

I encountered this problem:

$('#d3').show(); $('#d1, #d2').mouseenter(function(){ $( "#d3" ).animate({ width: "70%" }, 300 ); }).mouseleave(function(){ $( "#d3" ).animate({ width: "20%" }, 300 ); });

http://jsfiddle.net/2ep48y33/

When passing from one element to another it triggers an mouse leave for one of the element which starts animation. I want to prevent it and make it that they behave like one element. I'm in stadium that it's hard to change html order to make a parent element.

I expected this behavior but I wanted to give it a try.

Is it possible?

Thanks!

Improve this question

1 Answer 1

Reset to default
3

You need to use event.toElement or e.relatedTarget, so your jQuery code will then become-

$('#d3').show(); $('#d1, #d2').mouseenter(function(){ $( "#d3" ).animate({ width: "70%" }, 300 ); }).mouseleave(function(e){ var goingTo = e.toElement; if($(goingTo).attr('id')!='d1'&&$(goingTo).attr('id')!='d2') { $( "#d3" ).animate({ width: "20%" }, 300 ); } });

Here is an updated fiddle - http://jsfiddle.net/2ep48y33/1/

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

1 Comment

Uh that is nice one! Didn't know You can get the element You went on. Thank You very much! Really nice solution.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.