Запуск Javascript "onMouseOver" для детей?
Я не могу сказать, результат ли это jQuery, который я использую, но вот что я пытаюсь сделать:
<div class = "info" style = "display: inline;"
onMouseOut = "$(this).children('div').hide('normal');"
onMouseOver = "$(this).children('div').show('normal');"
>
<img src = "images/target.png">
<div class = "tooltiptwo" id = "tooltip"
style = "font-weight: normal; font-size: 0.8em;" >TOOLTIP TEXT</div>
</div>
Для всех, кто знаком с основами CSS и jQuery, я пытаюсь добавить простую анимацию в свои всплывающие подсказки. Проблема в срабатывании такой анимации. Кажется, что когда происходит анимация, если пользователь наводит указатель мыши на всплывающую подсказку, анимация переходит в цикл отображения и скрытия, пока пользователь не отодвинет указатель мыши. Это нежелательный эффект, так как я хочу, чтобы анимация исчезла только один раз, когда мышь перемещается из блока родитель. Я расположил свой CSS так, чтобы всплывающая подсказка отображалась в стороне от родительского div, но, несмотря на это, действия должны запускаться только для родительского элемента, а не для любого из его дочерних элементов.
Итак, как я могу этого добиться? Я хочу, чтобы мое состояние зависания / выхода в моем родительском элементе запускало функцию (анимацию) для дочерних элементов этого родительского элемента, при этом состояния наведения / выхода дочерних элементов ничего не делают. Кажется, что обычный метод onMouseOver и onMouseOut срабатывает даже для потомков родителя, которому принадлежит метод, что вызывает некоторые довольно нежелательные эффекты.
Обратите внимание, что я новичок в jQuery (хотя пока это потрясающе, я хочу покрыть свой сайт его добротой, если смогу), и если есть лучший способ достичь состояний зависания / выхода с помощью jQuery, я, вероятно, не знаю о них. ^ _ ^
Спасибо
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Вы следовали этому руководство?
Особенно в части перемещения мыши, где он постоянно устанавливает значения позиционирования влево и вверх, чтобы выровнять всплывающую подсказку рядом с курсором. координаты X и Y вызываются через .pageX и .pageY. И он также добавляет небольшое смещение в 15 пикселей, чтобы всплывающая подсказка не находилась прямо под курсором.
Таким образом, указатель мыши не может находиться над всплывающей подсказкой, даже в фазе затухания. Следовательно, нет бесконечного цикла
Нет, я не следовал этому руководству. На самом деле я бы предпочел, чтобы мои всплывающие подсказки оставались на странице, если это возможно, хотя я могу жить без этого.
редактировать: на самом деле это гораздо лучшее решение (кредит):
$('.info').bind('mouseenter', function() {
$('div', this).show('normal');
});
$('.info').bind('mouseleave', function() {
$('div', this).hide('normal');
});
// hide the tooltip to start off
$('.info div').hide();
edit2: в ответ на комментарии, я думаю, я бы предложил структурировать ваш HTML иначе или вместо этого привязать событие к элементу-брату (изображению):
<div class = "info">
<img src = "stuff.jpg" />
</div>
<div class = "tooltip"></div>
или привязка к изображению:
$('.info img').bind('mouseenter', function() { etc... });
$('.info img').bind('mouseleave', function() { etc... });
Выглядит неплохо, попробую позже, когда не опоздаю на работу. ;-) Спасибо
Это действительно лучший код подсказки при наведении указателя мыши, но он все еще не решает мою проблему: наведение указателя мыши по-прежнему срабатывает, когда пользователь наводит курсор на саму подсказку, и он должен срабатывать только тогда, когда пользователь наводит курсор на то, на что указывает подсказка.
Привяжите его к родительскому div и используйте stopPropagation, чтобы предотвратить его привязку к вашей подсказке. Нравится:
[код] $ ('. info'). bind ('mouseover', function (e) { e.stopPropagation (); $ (this> 'div'). show ('нормальный'); });
$ ('. info'). bind ('mouseout', function () { $ (this> 'div'). hide ('нормальный'); });
// скрываем всплывающую подсказку, чтобы начать $ ('. информация div'). hide (); [/код]
Однако я тоже использую pageX и pageY, чтобы подсказки двигались вместе с курсором.
Я обнаружил, что бесконечный цикл на самом деле возникает только тогда, когда они наводят указатель мыши на дочерний элемент во время эффекта затухания, но это сложно сделать нет ... Если им удастся двигаться очень быстро и навести указатель мыши до начала затухания, он просто оставайся там и не угасай.