Как определить на каком элементе произошло событие hover(или mouseenter)?
Всем привет!
Подскажите, пожалуйста, как определить на каком элементе произошло событие hover(или mouseenter) и добраться до его ребенка, чтобы применить css свойство? Нужно определить элемент из коллекции. Пример (с 2-x элементов): Словить на div.dFoto или div.item Добраться до div.dFoto > .h1 Заранее благодарен. <div id="example"> <div class="item"> <div class="dFoto"><span class="h1"> <h1>Текст 1</h1> </span></div> </div> <div class="item"> <div class="dFoto"><span class="h1"> <h1>Текст2</h1> </span></div> </div> </div> |
И кстати, нельзя пихать <h1> в <span>.
<style> .dFoto:hover .h1{ color: red; } </style> <div id="example"> <div class="item"> <div class="dFoto"><span class="h1"> <h1>Текст 1</h1> </span></div> </div> <div class="item"> <div class="dFoto"><span class="h1"> <h1>Текст2</h1> </span></div> </div> </div> |
<style> div.item { background-color: green; width: 200px; margin: 10px; padding: 5px; } </style> <div id="example"> <div class="item"> <div class="dFoto"> <span class="h1"> Текст 1 </span> </div> </div> <div class="item"> <div class="dFoto"> <span class="h1"> Текст2 </span> </div> </div> </div> <script> window.onload = function () { var aals = document.querySelectorAll('#example>div.item'), len = aals.length, divmouse = function (e) { var el = e ? e.target : window.event.srcElement; var ch = el.querySelector('span.h1'); alert(ch.innerHTML); }; for (; len--; aals[len].onmouseenter = divmouse); }; </script> |
|
danik.js,
буду знать Никогда даже не использовал это событие :) |
Цитата:
|
Цитата:
|
Цитата:
while(len--) aals[len].onmouseenter = divmouse; for (; len--;) aals[len].onmouseenter = divmouse; |
Poznakomlus, а что грубишь то? Бомбануло? :D
Цитата:
while(len-- && aals[len].onmouseenter = divmouse); |
Как все просто, а я усложнял себе задачу :)
danik.js Спасибо тебе за решение и отдельное спасибо за совет. |
Основное отличие mouseenter/mouseleave от mouseover/mouseout заключается в том, что на на дочерних элементах нельзя поймать событие.
Именно поэтому, если нужно делегирование, то используйте mouseover/mouseout: <script> document.addEventListener('DOMContentLoaded', function () { var div = document.getElementById('div'); div.addEventListener('mouseover', function (event) { var target = event.target; while (target != this) { if (target.tagName.toLowerCase() == 'p') { alert(target.textContent); break; } target = target.parentNode; } }); }); </script> <div id="div"> <p>text 1</p> <p>text 2</p> </div> А подписывать все дочерние элементы на события, ради mouseenter/mouseleave это по меньшей мере глупо. |
Часовой пояс GMT +3, время: 20:48. |