Change div1 on hover to div2 that is below div1
Can I change div1
if it div2
hangs, 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 evaluated
source to share
Use JQuery
. hover () + . css () for 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>
source to share
No, CSS does not provide the 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 hover over just the previous child div and will not burden the browser for the next companion overlay, which can only be achieved with CSS.
source to share
If you don't want to use javascript, you can use display: flex
in the container and then change the display order (note that the html order needs to be updated as well). Then you can hover over 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>
source to share
Try this code below.
$(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 helps you.
source to share
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>
source to share
Interestingly, as no one pointed out that there are multiple classes on the same page,
and no, you shouldn't target .div1
in the same way as many suggested, and expect everyone else .div1
in the DOM to not target 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 problem - here are some 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>
source to share