Вложенные элементы наведите указатель мыши

Все, у меня возникла проблема с обработчиком вложенного элемента. Кажется, когда мышь вводит div child, предки также находятся в состоянии hover, есть ли какие-либо способы запуска события hoverout предков, когда мышь вводит элемент child?Вложенные элементы наведите указатель мыши

Ниже я пытаюсь сделать это до сих пор. просмотрите его.

<style> 
div 
{ 
    border:1px solid red; 
    margin:10px; 
    padding:10px; 
} 
</style> 


    <script> 
     $(function() { 
      $('div').each(function(){ 
      var current = this; 
      $(this).hover(function(event){ 
       event.stopPropagation();// doesn't work. 
       console.log('Capture for hover in ' + current.tagName + '#'+ current.id + 
        ' target is ' + event.target.id); }, 
       function(event){ 
        event.stopPropagation(); 
        console.log('Capture for hover out' + current.tagName + '#'+ current.id + 
        ' target is ' + event.target.id); }); 

          }); 
         }); 
</script> 

<body id="greatgrandpa">       
     <div id="grandpa"> 
       <div id="parent"> 
        <div id="child"/> 
       </div> 
     </div> 
</body>

источник

2013-03-19 Joe.wang

Просто удалите астерикс и запустите функцию на изображении? Вы присоединяете обработчики событий внутри цикла, который перебирает все *** все элементы на странице! – adeneo

Привет, @adeneo, я просто обновляю вопрос, чтобы сделать это ясно. просмотрите его .thanks. –

Я действительно не понимаю, но вы можете установить функции mouseenter/leave на все, что хотите, например [** FIDDLE **] (http://jsfiddle.net/FXU65/) ?? – adeneo

Метод .hover() связывает обработчики для обоих mouseenter и mouseleave событий. Вы можете использовать его для простого применения поведения к элементу в течение времени, в течение которого мышь находится внутри элемента.

Однако, если вы используете события mouseover и mouseout, эти события запускаются, когда мышь перемещается и выходит из элементов И это потомки.

См. http://jsfiddle.net/5yQY5/ для альтернативной попытки вашего примера.

источник

2013-03-19 03:54:00 Cue

Это заставляет меня запутаться, прежде чем я получу ваш ответ. Спасибо, –

Использование наведения мыши и MouseOut события вместо

$(function() { 
    $('div').on('mouseover', function(e){ 
     e.stopPropagation(); 
     $(this).addClass('my-bg'); 
    }).on('mouseout', function(e){ 
     $(this).removeClass('my-bg'); 
    }) 
});

Демо: Fiddle

Примечание: Там нет необходимости перебирать каждого DIV и затем добавить обработчик событий для каждого из них, вам можно просто позвонить $('div').hover(...), он зарегистрирует hover обработчик для всех divs

источник

2013-03-19 03:38:19

Привет, @Arun P Johny, не могли бы вы рассказать мне разницу между «hoverin hoverout» и «mouseover mouseout»? Благодарю. –

вы можете посмотреть некоторые сообщения, подобные этому http://stackoverflow.com/questions/1104344/what-is-the-difference-between-the-mouseover-and-mouseenter-events –

Вам нужно найти, если цель DOM - child или нет.

Пример

$(this).hover(function(e){ 
    if($(e.target).is('div#child')) 
    { 
     // your child span is being hovered over 
     e.stopPropagation(); 
    } 
    else if($(e.target).is('div#parent')) 
    { 
     // your parent element is being hovered over 
    } 
});

источник

2013-03-19 03:41:15

Привет, друг, ответ Аруна П. Джонни это лучший способ. Благодарю. –

@ Joe.wang всегда приветствуется ... Я просто попытался ответить в соответствии с вашим кодом, поэтому я подумал, почему редактирование кода дает решение, которое соответствует текущему коду. –

Вложенные элементы наведите указатель мыши

ответ

Смежные вопросы