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> 

Answer 2

Nope, the CSS does not provide a provide a previous sibling selector, the only solution is using JS. You can use jquery's prev() method for the same.

 $(function() { $(".div2").hover(function() { $(this).prev().addClass("hoveredBg"); }, function() { $(this).prev().removeClass("hoveredBg"); }); }); 

 .hoveredBg { background-color: red; } 

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

This will only help your hover for the previous sibling div only and not burden the browser for next sibling hover, which can be achieved using CSS only.

Answer 3

If you don't want to use javascript, you can use display: flex on the container, then change the rendering order (note that the html order has to be updated as well). Then you can hover on div2 and highlight div1 .

 .container { display: flex; flex-wrap: wrap; } .div1, .div2 { flex: 0 0 100%; } .div1 { order: 1; } .div2 { order: 2; } .div2:hover ~ .div1 { background-color: red; } 

 <div class="container"> <div class="div2">hover 2</div> <div class="div1">hover 1</div> </div> 

Answer 4

Try this below code.

 $(document).ready(function() { $(".div2").mouseover(function() { $(".div1").css("background-color", "red"); }); $(".div2").mouseout(function() { $(".div1").css("background-color", ""); }); }); 

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

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

Hope this will help you.

Answer 5

Check out this fiddle,

https://jsfiddle.net/rkqhvzyc/

 $(document).ready(function() { $(".div2").hover(function(){ $('.div1').css("background-color", "red"); }, function(){ $('.div1').css("background-color", "white"); }); }); 

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

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

Answer 6

Interesting how nobody pointed out that classes are multiple on a single page,
and no, you should not target .div1 just like that, like many suggested, and expect that all other .div1 in the DOM will not be targeted as-well.

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

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

To reflect the above-mentioned problem - here's a couple of solutions:

 // 1. EXAMPLE TARGETING .prev() (NOT FLEXIBLE) $(".hoverTargetPrev").hover(function() { $(this).prev(".div1").toggleClass("red"); }); // 2. BETTER EXAMPLE USING .couple PARENT, .closest() AND .find() $(".div2").hover(function() { $(this).closest(".couple").find(".div1").toggleClass("red"); }); // 3. EXAMPLE TARGETING .prevAll() and .eq(0) (a bit expensive but...) $(".hoverTargetNearestPrev").hover(function() { $(this).prevAll(".div1").eq(0).toggleClass("red"); }); 

 .div2 {color:red;} .red {background: red;} 

 <h3> 1. EXAMPLE TARGETING .prev() (NOT FLEXIBLE)</h3> <div class="div1">DIV1</div> <div class="div2 hoverTargetPrev">DIV2 hover me</div> <div class="div1">DIV1</div> <div class="div2 hoverTargetPrev">DIV2 hover me</div> <div class="div1">DIV1</div> <div>Future intruder...</div> <div class="div2 hoverTargetPrev">DIV2 hover me (will not work any more)</div> <h3> 2. BETTER EXAMPLE USING .couple PARENT, .closest() AND .find() </h3> <div class="couple"> <div class="div1">DIV1</div> <div class="div2">DIV2 hover me</div> </div> <div class="couple"> <div class="div1">DIV1</div> <div class="div2">DIV2 hover me</div> </div> <div class="couple"> <div class="div1">DIV1</div> <div>Future intruder...</div> <div class="div2">DIV2 hover me (will kork!)</div> </div> <h3> 3. EXAMPLE TARGETING .prevAll() and .eq(0) (a bit expensive but...)</h3> <div class="div1">DIV1</div> <div class="div2 hoverTargetNearestPrev">DIV2 hover me</div> <div class="div1">DIV1</div> <div class="div2 hoverTargetNearestPrev">DIV2 hover me</div> <div class="div1">DIV1</div> <div>Future intruder...</div> <div class="div2 hoverTargetNearestPrev">DIV2 hover me (will work!!)</div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>