change div1 on hover over div2 which is under div1

Question

Is it possible to change div1 if div2 is hovered but under 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>

Solutions using Javascript and/or JQuery are also appreciated

Answer 1

Using JQuery's .hover() + .css() for both the divs

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