JQuery - методы расширения «периметра» для мышеловки?

Я хотел бы реализовать такое поведение, чтобы событие mouseover /hover срабатывало, когда указатель мыши зависает над определенным элементом div, а такое, чтобы событие mouseout переключалось не тогда, когда указатель покидает элемент div, а когда он покидает область 10px наша сторона div.

Есть ли способ достичь этого, который не включает создание большего родительского div для привязки события mouseout?

7 голосов | спросил UpTheCreek 6 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowTue, 06 Sep 2011 11:55:36 +0400 2011, 11:55:36

3 ответа


0

Мой комментарий заинтересовал меня посмотреть, возможно ли это, и на самом деле это довольно просто. Не знаю, насколько хорошо он будет работать в разных браузерах и с большим количеством div-ов, но в этом примере это работает:

http://jsbin.com/exulef/2/edit

var hello = $('#hello');
var position = hello.offset();
var height = hello.height();
var width = hello.width();

$(document).mousemove(function(e) {
  if (hello.data('inside')) {
    if ((e.pageX < position.left - 10 || e.pageX > position.left + width + 10) || 
       (e.pageY < position.top - 10 || e.pageY > position.top + height + 10)) {
      hello.text(position.top + " : " + position.left + " : " + e.pageX + " : " + e.pageY + "  Outside")
        .data('inside', false);
    }
  }
  else {
    if ((e.pageX > position.left && e.pageX < position.left + width) && 
        (e.pageY > position.top && e.pageY < position.top + height)) {
      hello.text(position.top + " : " + position.left + " : " + e.pageX + " : " + e.pageY + "  Inside")
        .data('inside', true);
    }
  }  
});

привет это просто квадратный div. Было бы довольно легко превратить в плагин, что я мог бы сделать позже, смеется.

Изменить - в конце концов я превратил это в плагин:

ответил Richard Dalton 6 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowTue, 06 Sep 2011 12:29:18 +0400 2011, 12:29:18
0

Есть способ сделать это без внешнего div, но это подразумевает, что у вашего div будет запас, даже если он не завис.

Он использует тот факт, что отступ находится внутри div, а поле - снаружи.

  • Когда ничего не происходит, у нас есть поле, мы должны войти в div, чтобы навести курсор.

  • Когда он наведен, поле становится отступом, поэтому мы немного больше внутри div, когда мышь покидает div.

  • Когда мы покидаем отступы, он возвращается к полям.

CSS - это что-то вроде:

.a{
   margin:10px;
}
div.b{
   padding:10px;
   margin:0;
}

Обратите внимание, что важно иметь более специфичный селектор b, чтобы его можно было применять без использования важного и без учета порядка.

Js будет:

$(".a").bind("mouseenter",function(){
    $(this).addClass("b");
}).bind("mouseleave",function(){
    $(this).removeClass("b");
});

Пример здесь: http://jsfiddle.net/ynecV/

ответил Py. 6 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowTue, 06 Sep 2011 12:25:02 +0400 2011, 12:25:02
0

Хм, я бы пошёл с обёртыванием нужного div в другой и связал бы его мышью - это было бы самое надёжное решение.

НО, если вы настаиваете на том, чтобы не создавать еще один div, я бы связал пользовательский обработчик mousemove, который был бы связан (на документе) с указателем мыши над div, и обнаружил бы тот факт, что мышь отодвигается от ограничивающей рамки div более 10px. Если это так, обработчик mousemove запустит пользовательское событие jQuery, а затем сам себя отменит.

ответил WTK 6 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowTue, 06 Sep 2011 12:24:42 +0400 2011, 12:24:42

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132