Плагин jQuery hoverIntent показывает / скрывает div при родительском наведении, но продолжает отображаться при наведении - PullRequest
Новая
       7

Плагин jQuery hoverIntent показывает / скрывает div при родительском наведении, но продолжает отображаться при наведении

0 голосов
/ 20 декабря 2010

У меня есть кнопка, которая при наведении курсора мыши (мыши) отображает div прямо под ним.Когда зависший (mouseout), div исчезает.

Это все работает хорошо и хорошо, но теперь мне нужно держать div под кнопкой, показывающей, наводит ли пользователь курсор на этот div (для взаимодействия с содержимым внутри div).

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

Для этого я использую плагин hoverIntent jQuery. 

// This is the button that when hovered
// triggers the div below it to show
$('#hoverMeToShowHideDiv').hoverIntent(function () {

$("#displayDiv").stop().slideDown('slow');
},
function () {
    // I don't want the div to hide if user hovers over it
    $("#displayDiv").stop().slideUp('slow');
});

HTML: 

<div id="hoverMeToShowHideDiv"> // some stuff </div>
<div id="displayDiv"> 
    // some other stuff that I want to 
    // keep showing if users hover over it 
</div>

1 Ответ

1 голос
/ 20 декабря 2010

Добавьте еще один div #wrapperDiv вокруг кнопки и #displayDiv и прикрепите hoverIntent к #wrapperDiv вместо кнопки: 

$('#wrapperDiv').hoverIntent(function () {
   $("#displayDiv").stop().slideDown('slow');
},
function () {
   // I don't want the div to hide if user hovers over it
   $("#displayDiv").stop().slideUp('slow');
});

HTML: 

<div id="wrapperDiv">
   <div id="hoverMeToShowHideDiv"> // some stuff </div>
   <div id="displayDiv"> 
      // some other stuff that I want to 
      // keep showing if users hover over it 
   </div>
</div>
...