On div hover, display a new div on a third one
Question
Say I have 2 divs, positioned side by side (with some intermediate elements between them): A (left) and B(right). When hovering over B, I wish to have another div(C) appear over the left one (A).
I know how to toggle the display none/block properties but I don't know how to write the condition so the div C can appear on another div, not the one that we're hovering over.
Can this be done?
<div className="A">
<h2>About me</h2>
</div>
<div className="B">
<div>
<Link className="link1-to-project" to="/project1">
<h2>Project 1</h2>
<div className="C"></div>
</div>
2 answers
solution1
1 2020-06-26 10:05:54
UPDATE: https://jsfiddle.net/mq5bza81/1/
https://jsfiddle.net/mq5bza81/
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<style>
.wrapper {
position: relative;
}
.b:hover+.c {
display: block;
}
.c {
display: none;
position: absolute;
top: 0;
}
</style>
<div class="wrapper">
<div class="a">AAA</div>
<div class="b">BBB</div>
<div class="c">CCC</div>
</div>
</body>
</html>
solution2
1 ACCPTED 2020-06-26 10:19:51
Html
<div id="a">
Div A
<div id="c">Div C</div>
</div>
<div id="b">Div B</b>
css
#a, #b{
float:left;
height:100px;
width:100px;
color:#fff;
background-color:#ffcc66;
margin:10px;
text-align:center;
}
#c{
background-color:#000;
margin:10px;
visibility:hidden;
}
Javascript
document.getElementById("b").addEventListener("mouseover", mouseOver);
document.getElementById("b").addEventListener("mouseout", mouseOut);
function mouseOver() {
document.getElementById("c").style.visibility = "visible";
}
function mouseOut() {
document.getElementById("c").style.visibility = "hidden";
}
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.