CODEWITHSUNDEEP
javascriptmouseleavemouseenter
bobber205
bobber205

Reputation: 13372

Combining Two Dom Elements as One with Regards to Mouse Events

I have two divs on top of everything positioned next to each other.

enter image description here

I'd like for the sake of mouseenter and mouseleave that they be treated as "one". They line up next to each other (or overlap).

Is this possible?

I've tried doing a mouseleave/mouseenter combo but I can't guarantee which will trigger first, the leave from the first element or the enter to its buddy.

Thanks SO!

Upvotes: 1

Views: 816

Answers (1)

epascarello
epascarello

Reputation: 207527

onmouseleave has an event property {{toElement}} to tell you what element it is entering.

You just need to check to see if it is not the other element

$( function(){

  var box1 = $("#box1");
  var box2 = $("#box2");

  box1.add(box2).mouseenter( function(){
      box1.css("background-color","#CFC");  
      box2.css("background-color","#DED");  
  }).mouseleave( function(e){
      var domElem = e.toElement;
      if(domElem==box1[0] || domElem==box2[0] ) return;
      box1.add(box2).css("background-color","#CCC");
  });


});

jsFiddle

Upvotes: 1

Related Questions