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>
|
рони, спасибо, но то что я имел в виду сделал 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);
|
Safort,
а почему родительские элементы перестали подсвечиваться? Я порядок действий не понимаю как всё происходит. Т.е. откуда начинается всплытие, если, например, на элемент 3 навожу курсор, как меняется при этом подсветка.. дочерних же элементов много и они на разных уровнях иерархии |
|
спасибо, это и читаю)
|
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>
|
рони,
Спасибо, всё понятно, останавливаем всплытие значит и назначаем или убираем класс:) |
| Часовой пояс GMT +3, время: 05:28. |