Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.03.2014, 01:35
Новичок на форуме
Отправить личное сообщение для Boshnik Посмотреть профиль Найти все сообщения от Boshnik
 
Регистрация: 23.03.2014
Сообщений: 2

Как определить на каком элементе произошло событие 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>
Ответить с цитированием
  #2 (permalink)  
Старый 23.03.2014, 02:20
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

И кстати, нельзя пихать <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>
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #3 (permalink)  
Старый 23.03.2014, 02:21
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,368

<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>

Последний раз редактировалось Vlasenko Fedor, 23.03.2014 в 02:26.
Ответить с цитированием
  #4 (permalink)  
Старый 23.03.2014, 02:36
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Poznakomlus,

(https://developer.mozilla.org/en-US/...nce/mouseenter)
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #5 (permalink)  
Старый 23.03.2014, 03:17
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,368

danik.js,
буду знать
Никогда даже не использовал это событие
Ответить с цитированием
  #6 (permalink)  
Старый 23.03.2014, 03:24
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 2,928

Сообщение от Poznakomlus
for (; len--; aals[len].onmouseenter = divmouse);
Фу, аж глаза режет.
Ответить с цитированием
  #7 (permalink)  
Старый 23.03.2014, 03:41
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от Ruslan_xDD
Фу, аж глаза режет.
Согласен )
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #8 (permalink)  
Старый 23.03.2014, 03:50
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,368

Сообщение от Ruslan_xDD
Фу, аж глаза режет
очки протри и на закуску
while(len--) aals[len].onmouseenter = divmouse;

for (; len--;) aals[len].onmouseenter = divmouse;
Ответить с цитированием
  #9 (permalink)  
Старый 23.03.2014, 10:57
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 2,928

Poznakomlus, а что грубишь то? Бомбануло?

Цитата:
while(len--) aals[len].onmouseenter = divmouse;
В твоём стиле

while(len-- && aals[len].onmouseenter = divmouse);

Последний раз редактировалось ruslan_mart, 23.03.2014 в 11:33.
Ответить с цитированием
  #10 (permalink)  
Старый 23.03.2014, 20:57
Новичок на форуме
Отправить личное сообщение для Boshnik Посмотреть профиль Найти все сообщения от Boshnik
 
Регистрация: 23.03.2014
Сообщений: 2

Как все просто, а я усложнял себе задачу

danik.js Спасибо тебе за решение и отдельное спасибо за совет.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как определить активное окно/вкладку? Chameleon Events/DOM/Window 5 19.03.2012 06:59
Как отловить обратное событие "click" ? jsuse Общие вопросы Javascript 2 17.01.2012 22:16
Как правильно подавить событие при подключении своего обработчика? Маэстро Firefox/Mozilla 2 03.09.2011 10:46
Плагин JQuery tabs как подписаться нв событие перекл.вкладок xela1980 jQuery 6 15.12.2009 17:00
как проверить поддеружет браузер определенное событие? GOll Элементы интерфейса 9 24.07.2008 13:40