Форум

Начинающий-Js-кодер · #1 (**permalink**) 15.07.2018, 15:51

Есть такой HTML код:

<div style="border: 2px black solid; padding:50px; height: 100px;" id="nested1">
    <div style="border: 1px blue solid; height: 100px; text-align:center;line-height:100px" id="nested2">
	DROP
    </div>
</div>

Как на Jquery сделать чтобы при наведении на nested1 он подсвечивался, а если навожу на nested2 nested1 не подсвечивался, а только nested2 подсвечивался.
Что-то с вложенностью. а как правильно не знаю.
Спасибо.

рони · #2 (**permalink**) 15.07.2018, 16:07

Начинающий-Js-кодер,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  div.act{
        background-color: #FFD700;
  }
   div.act  div{
      background-color:  #FFFFFF;
  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
$("div").on("mouseover mouseout", function(event) {
   event.stopPropagation();
   $(this).toggleClass("act")
})
});
  </script>
</head>

<body>
<div style="border: 2px black solid; padding:50px; height: 100px;" id="nested1">
    <div style="border: 1px blue solid; height: 100px; text-align:center;line-height:100px" id="nested2">
	DROP
    </div>
</div>

</body>
</html>

Начинающий-Js-кодер · #3 (**permalink**) 15.07.2018, 16:37

Спасибо большое вам

Начинающий-Js-кодер · #4 (**permalink**) 15.07.2018, 16:51

А как быть если для одного дива надо одно свойство, а для другого другое? То есть добавлять всем act не выйдет. одному надо act1 другому act2

Начинающий-Js-кодер · #5 (**permalink**) 15.07.2018, 16:56

или можно сделать это как то на css?

рони · #6 (**permalink**) 15.07.2018, 19:11

Сообщение от Начинающий-Js-кодер

на css?

скорее всего нет.

Сообщение от Начинающий-Js-кодер

А как быть если для одного дива надо одно свойство, а для другого другое?

не понял

Начинающий-Js-кодер · #7 (**permalink**) 15.07.2018, 19:58

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

не понял

Ну если будет не один див вложенный и чтобы каждому диву свой класс добавлять.

рони · #8 (**permalink**) 15.07.2018, 20:16

Сообщение от Начинающий-Js-кодер

Ну если будет не один див вложенный и чтобы каждому диву свой класс добавлять.

по прежнему не понимаю, код работает для любой вложенности!

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  div.act{
        background-color: #FFD700;
  }
   div.act  div{
      background-color:  #FFFFFF;
  }
  div{
      margin: 20px;
      border: 2px black solid;
  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
$("div").on("mouseover mouseout", function(event) {
   event.stopPropagation();
   $(this).toggleClass("act")
})
});
  </script>
</head>

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

</body>
</html>

Начинающий-Js-кодер · #9 (**permalink**) 15.07.2018, 21:57

<div>
	    <div>
	        <div>
	            <div>
	                <div class="cl1">
	                    <div></div>
	                </div>
<div class="cl2">
	                    <div></div>
	                </div>
	            </div>
	        </div>
	    </div>
	</div>

Для cl1 надо присвоить класс act1 а для cl2 act2. При этом cl1,cl2 могут быть на любой вложенности. так яснее?

рони · #10 (**permalink**) 15.07.2018, 22:12

Начинающий-Js-кодер,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  div.act{
        background-color: #FFD700;
  }
   div.act  div{
      background-color:  #FFFFFF;
  }
  div{
      margin: 20px;
      border: 2px black solid;
  }
 .act.act1 {
     background-color: #FF1493;
 }
 .act.act2 {
     background-color: #FF4500;
 }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
$("div").on("mouseover mouseout", function(event) {
   event.stopPropagation();
   var cls = "act";
   if($(this).is(".cl1")) cls += " act1";
   if($(this).is(".cl2")) cls += " act2";
   $(this).toggleClass(cls)
})
});
  </script>
</head>

<body>
<div>
	    <div>
	        <div>
	            <div>
	                <div class="cl1">
	                    <div></div>
	                </div>
<div class="cl2">
	                    <div></div>
	                </div>
	            </div>
	        </div>
	    </div>
	</div>


</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript