Точно определить блок при наведении
Имеется:
<div>
<div>
<div>
<div></div>
</div>
</div>
</div>
Подскажите пожалуйста, как при наведении изменить класс блока который под курсором, у меня же получается, что при наведении на дочерний, изменяются все родители:
jQuery('div').hover(function(){
jQuery(this).addClass('hoverBlock');
}, function(){
jQuery(this).removeClass('hoverBlock');
});
|
здесь можно почитать
https://learn.javascript.ru/event-bubbling |
вроде и jQuery(this).addClass('hoverBlock');
работает?
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<style>
div {
padding: 20px;
border: 1px solid;
background-color: white;
}
.hoverBlock {
background-color: red;
}
</style>
<head>
<body>
<div>
<div>
<div>
<div></div>
</div>
</div>
</div>
<script>
jQuery('div').hover(function(e){
jQuery(this).addClass('hoverBlock');
}, function(e){
jQuery(this).removeClass('hoverBlock');
});
</script>
</body>
</html>
|
| Часовой пояс GMT +3, время: 19:22. |