Форум

рони · #11 (**permalink**) 27.02.2015, 21:04

zm_sansan,

<!DOCTYPE HTML>

<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        .lightblue {
            background: lightblue;
        }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script>
        $(function() {
            $(".a:not(:has(>.a))").on('mouseenter mouseleave', function(event) {
                $(this).toggleClass('lightblue', event.type == 'mouseenter')
            });
        });
    </script>
</head>

<body>
    <div class='a'> 1
        <div class='a'> 2 </div>
        <div class='a'> 3
            <div class='a'> 4 </div>
        </div>
    </div>


</body>

</html>

zm_sansan · #12 (**permalink**) 27.02.2015, 21:19

рони, спасибо, но то что я имел в виду сделал Safort, но только я не понимаю как его код переписать на JQuery. И не совсем понимаю как работает.

Safort · #13 (**permalink**) 27.02.2015, 21:40

Сообщение от zm_sansan

рони, спасибо, но то что я имел в виду сделал Safort, но только я не понимаю как его код переписать на JQuery. И не совсем понимаю как работает.

Тут всё просто) События имеют особенность - они "всплывают" от дочернего элемента к родительскому.

function lightEl(e) {
//выводит в консоль объект события содержащий нужную инфу. Я его просто забыл убрать
  console.log(e); 
// в e.target содержится ссылка на наведённый элемент.
// метод toggle() добавляет элементу нужный класс, а если этот класс уже есть, то удаляет его.
  e.target.classList.toggle('lightme');
}

//вешаем на элемент-родитель обработчики событий.
document.querySelector('#el').addEventListener('mouseover', lightEl , false);
document.querySelector('#el').addEventListener('mouseout', lightEl , false);

Код можно и сократить:

function lightEl(e) {
  e.target.classList.toggle('lightme');
}

var el = document.querySelector('#el');
el.addEventListener('mouseover', lightEl , false);
el.addEventListener('mouseout', lightEl , false);

zm_sansan · #14 (**permalink**) 27.02.2015, 21:54

Safort,
а почему родительские элементы перестали подсвечиваться?
Я порядок действий не понимаю как всё происходит.
Т.е. откуда начинается всплытие, если, например, на элемент 3 навожу курсор, как меняется при этом подсветка.. дочерних же элементов много и они на разных уровнях иерархии

Safort · #15 (**permalink**) 27.02.2015, 22:04

zm_sansan,
http://learn.javascript.ru/bubbling-and-capturing

zm_sansan · #16 (**permalink**) 27.02.2015, 22:14

спасибо, это и читаю)

рони · #17 (**permalink**) 27.02.2015, 22:19

zm_sansan,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .lightblue {
    background: lightblue;
  }
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
     $(function(){
  $(".a").on('mouseover mouseout',function(event) {
     event.stopPropagation();
     $(this).toggleClass('lightblue', event.type == 'mouseover')
});
});

  </script>
</head>

<body>
<div class='a'> 1
  <div class='a'> 2 </div>
   <div class='a'> 3
     <div class='a'> 4  </div>
  </div>
</div>

  <div class='a' id="el"> 1
  <div class='a'> 2 </div>
   <div class='a'> 3 </div>
</div>
</body>

</html>

zm_sansan · #18 (**permalink**) 27.02.2015, 22:24

рони,
Спасибо, всё понятно, останавливаем всплытие значит и назначаем или убираем класс

Форум

Справочник

Discord чат

Курсы javascript