javascript - 将鼠标悬停在 div1 下的 div2 上时更改 div1

如果 div1 悬停但在 div2 下，是否可以更改 div1 ？

/* Works */
.div1:hover + .div2 {
  background-color: red;
}

/* Doesn't Work */
.div2:hover + .div1,
.div2:hover ~ .div1,
.div2:hover .div1 {
  background-color: red;
}

<div class="div1">hover</div>
<div class="div2">hover</div>

使用 Javascript 和/或 JQuery 的解决方案也很受欢迎

最佳答案

对两个 div 使用 JQuery 的 .hover() + .css()

$( ".div1" ).hover(
  function() {
    $(".div2").css( "background-color", "red" );
  }, function() {
    $(".div2").css( "background-color", "initial" );
  }
);

$( ".div2" ).hover(
  function() {
    $(".div1").css( "background-color", "red" );
  }, function() {
    $(".div1").css( "background-color", "initial" );
  }
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div1">hover</div>
<div class="div2">hover</div>

关于javascript - 将鼠标悬停在 div1 下的 div2 上时更改 div1，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44560772/