Форум

Vanguger · #1 (**permalink**) 29.11.2016, 16:14

Имеется:

<div>
  <div>
    <div>
      <div></div>
    </div>
  </div>
</div>

Подскажите пожалуйста, как при наведении изменить класс блока который под курсором, у меня же получается, что при наведении на дочерний, изменяются все родители:

jQuery('div').hover(function(){
	jQuery(this).addClass('hoverBlock');
}, function(){
	jQuery(this).removeClass('hoverBlock');
});

Pavel M. · #2 (**permalink**) 29.11.2016, 17:07

здесь можно почитать
https://learn.javascript.ru/event-bubbling

Pavel M. · #3 (**permalink**) 30.11.2016, 11:22

вроде и 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>

Форум

Справочник

Discord чат

Курсы javascript