Объединение двух элементов Dom в один с учетом событий мыши

У меня есть два div поверх всего, что расположено рядом друг с другом.

введите здесь описание изображения

Я бы хотел, чтобы mouseenter и mouseleave считались «одним». Они выстраиваются рядом друг с другом (или перекрываются).

Это возможно?

Я пытался выполнить комбинацию mouseleave/mouseenter, но я не могу гарантировать, что сработает первым: выход из первого элемента или вход к его приятелю.

Спасибо ТАК!


javascript mouseenter mouseleave
person bobber205    schedule 24.10.2011    source источник
comment
Разве вы не можете просто вложить меньший div и расположить его снаружи с абсолютным позиционированием? Затем вы можете просто применить ввод/выход к содержащемуся div.   -  person canon    schedule 25.10.2011
comment
Поместите div вокруг обоих и используйте это.   -  person RobG    schedule 25.10.2011
comment
Попробую первый комментарий. :D   -  person bobber205    schedule 25.10.2011
comment
Попытка написать первый комментарий, но придумать, куда поместить второй div, — это PITA. Я бы предпочел использовать существующий элемент на странице, выровненный с большим полем.   -  person bobber205    schedule 25.10.2011

Ответы (1)


arrow_upward
1
arrow_downward

onmouseleave имеет свойство события {{toElement}}, чтобы сообщить вам, в какой элемент он входит.

Вам просто нужно проверить, не является ли это другим элементом

$( 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

person epascarello    schedule 25.10.2011