I have two divs A and B. div A is an image. Div B is a paragraph underneath div A.
I am trying to make it so that if I put the mouse over div A, the background and font colour of div B transition to different colours without affecting div A. I currently have the :hover selector so div B changes if someone hovers over it. But I don't know how to affect div B while hovering over div A.
Any clues on how to achieve this?
EDIT: Please see below for the structure of my code. I'm trying to make it so that if I hover over #image1, the background of #info1 and the font colour of its paragraph would change and so on so forth for the other two images.
<div class="row">
<div class="col-md-4 col-sm-12">
<div class="row">
<div class="col-md-12 col-sm-6">
<img id="image1" src="res/images/aimage1.png" class="img-responsive center-block">
</div>
<div id="info1" class="col-md-12 col-sm-6">
<p class="washed-out"> 1 </p>
</div>
</div>
</div>
<div class="col-md-4 col-sm-12">
<div class="row">
<div class="col-md-12 col-sm-6">
<img id="image2" src="res/images/aimage2.png" class="img-responsive center-block">
</div>
<div id="info2" class="col-md-12 col-sm-6">
<p class="washed-out"> 2 </p>
</div>
</div>
</div>
<div class="col-md-4 col-sm-12">
<div class="row">
<div class="col-md-12 col-sm-6">
<img id="image3" src="res/images/animage3.png" class="img-responsive center-block">
</div>
<div id="info3" class="col-md-12 col-sm-6">
<p class="washed-out"> 3 </p>
</div>
</div>
</div>
</div>
css:
.washed-out{
background: white;
color: black;
transition: background-color 300ms linear, color 1s linear;
}
.washed-out:hover{
background: black;
color: white;
}
You use the sibling selector ~
or the immediate sibling selector +
img:hover + div { color: red; }
<img src="http://placehold.it/100"> <div>Hey there...I get red when you hover the image</div>
Update based on comment, possible CSS version
.hoverme:hover + div .washed-out { color: red; background: black; }
<div class="col-md-12 col-sm-6 hoverme"> <img id="image1" src="res/images/aimage1.png" class="img-responsive center-block"> </div> <div id="info1" class="col-md-12 col-sm-6"> <p class="washed-out">1</p> </div>
Update based on comment, possible JS version
window.addEventListener('load', function() { var imglist = document.querySelectorAll('img.img-responsive'); for (var i = 0; i < imglist.length; i++) { imglist[i].addEventListener('mouseover', function(e) { e.target.parentElement.nextElementSibling.classList.add('infos'); }) imglist[i].addEventListener('mouseout', function(e) { e.target.parentElement.nextElementSibling.classList.remove('infos'); }) } })
div.infos .washed-out { color: red; background: black; }
<div class="col-md-12 col-sm-6"> <img id="image1" src="res/images/aimage1.png" class="img-responsive center-block"> </div> <div id="info1" class="col-md-12 col-sm-6"> <p class="washed-out">1</p> </div>
You're looking for the adjacent sibling selector - element:hover + element
:
.container { width: 100px; height: 100px; background: red; transition: all 0.5s; } .container:first-child { margin-bottom: 10px; } /** if the 1st element is hovered, changed the 2nd **/ .container:hover + .container { background: blue; color: white; }
<div class="container">Div 1</div> <div class="container">Div 2</div>
Use successor siblings ~
or immediate successor siblings +
to make any change on hover
img:hover ~ div { color: red; }
<img src="http://placehold.it/100"> <div>Hey there...I get red when you hover the image</div> <div>Hey there...I also get red when you hover the image</div>
What you want can be done by javascript event handler.
Something like this:
var d1 = document.getElementById("div1"); // on hover on this div
var d2 = document.getElementById("div2"); // bring changes to this
d1.addEventListener("hover", callfun, false);
function callfun(){
d2.style.backgroundColor = 'blue';
}
Good luck
Basically you need to register a hovering in and out handler as shown in the following answer: Event listener hover changing other element Here is a slightly modified version of it to fit more closely to your need.
document.getElementById("Div-A").addEventListener("mouseenter",function (){
document.getElementById("Div-B").style.backgroundColor = "red";
document.getElementById("Div-B").style.backgroundColor = "Yellow";
});
document.getElementById("Div-A").addEventListener("mouseout",function (){
document.getElementById("Div-B").style.backgroundColor = "";
document.getElementById("Div-B").style.text = "";
});
<script>
function Myfunc1(){
document.getElementById("div1").style.backgroundColor = "green"
document.getElementById("div2").style.backgroundColor = "white"}
function Myfunc2(){
document.getElementById("div2").style.backgroundColor = "red"
document.getElementById("div1").style.backgroundColor = "white"}
</script>
<pre><div id="div1" onmouseover="Myfunc1()"><img src=""><p> look</p></div>
<div id="div2" onmouseover="Myfunc2()"><p>here</p></div></pre>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.