javascript - 将鼠标悬停在 div 1 下的 div 2 上时更改 div 1

Question

如果 div2 悬停在 div1 下方，是否可以更改 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 的解决方案也很受欢迎

Answer 1

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

$( ".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>