Javascript "onMouseOver" запускается для детей? - PullRequest
Новая
       13

Javascript "onMouseOver" запускается для детей?

1 голос
/ 21 ноября 2008

Я не могу сказать, является ли это результатом использования 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, я пытаюсь добавить простую анимацию в мои подсказки. Проблема заключается в запуске такой анимации. Кажется, что когда происходит анимация, если пользователь наводит указатель мыши на всплывающую подсказку, анимация будет отображаться и скрываться, пока пользователь не уберет мышь. Это нежелательный эффект, так как я хочу, чтобы анимация исчезала только один раз, когда мышь выходит из parent div. Я разместил свой CSS так, чтобы всплывающая подсказка появлялась вдали от родительского элемента div, но независимо от того, какие действия должны запускаться только для родительского элемента, а не для его дочерних элементов.

Так в принципе, как бы я пошел к достижению этого? Я хочу, чтобы мое состояние hover / out на родительском элементе вызывало функцию (анимацию) дочерних элементов этого родителя, при этом состояния hover / out дочерних элементов не делали ничего. Кажется, что обычный метод onMouseOver и onMouseOut запускается даже для дочерних элементов родительского объекта, которому принадлежит метод, что вызывает некоторые довольно нежелательные эффекты.

Обратите внимание, что я новичок в jQuery (хотя пока он потрясающий, я хочу покрыть свой сайт в его совершенстве, если смогу), и если есть лучший способ для достижения состояния зависания / выхода с помощью jQuery, я, вероятно, надену не знаю о них. ^ _ ^

Спасибо

Ответы [ 4 ]

6 голосов
/ 21 ноября 2008

edit : на самом деле это гораздо лучшее решение ( credit ): 

$('.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... });
1 голос
/ 22 ноября 2008

Это отличная статья о событиях мыши: http://www.quirksmode.org/js/events_mouse.html

0 голосов
/ 18 сентября 2010

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

[код] $ ('. info'). bind ('mouseover', function (e) { e.stopPropagation (); $ (this> 'div'). show ('normal'); });

$ ('. Info'). Bind ('mouseout', function () { $ (this> 'div'). hide ('normal'); });

// скрываем подсказку, чтобы начать $ ('. info div'). hide (); [/ Код]

Однако я также использую pageX и pageY, чтобы мои подсказки двигались с курсором.

0 голосов
/ 21 ноября 2008

Вы следовали этому учебнику ?

Особенно часть перемещения мыши, где он постоянно устанавливает значения позиционирования слева и сверху, чтобы выровнять подсказку рядом с курсором. координаты X и Y вызываются через .pageX и .pageY. И он также добавляет небольшое смещение 15 пикселей, чтобы всплывающая подсказка находилась не ниже курсора.

Таким образом, мышь не может находиться над всплывающей подсказкой, даже в фазе затухания. Следовательно, нет бесконечного цикла

...