How to display a div on hover of button using css - html

Question

My code:
#dropdown {
width: 80px;
height: 80px;
border-radius: 80px;
border-width: 0px;
transition: background-color 1s;
}
#dropdown_word {
font-size: 40px;
color: orangered;
}
#dropdown:hover {
background-color: cyan;
}
<div class="heading">
<h2>
H2 goes here
</h2>
<div class="button">
<p>
<button id="dropdown">
<span id="dropdown_word"> V </span>
</button>
</p>
</div>
</div>
<div class="content">
<h4>
H4 goes here
</h4>
<p>
Text goes here
</p>
</div>
I want to display the class .content when the mouse is hovering on the button. Before the hover, .content should not be visible to the user. What CSS code can be used to get the above output?

Answer 1

All you have to do is move the .content div inside the .button div and apply the following CSS:
.content{
display: none;
}
.button:hover .content{
display: block;
}
Here is the JSFiddle.

Answer 2

One way to do is it to add a common div parent that contains both the button and the .content div. The drawback to this method is that the .content class will show up if the user enters .parent div. so if your parent div covers half the page your button is going to show up if you hover anywhere on that area.
<div class="parent">
<div class="heading">
<h2>
H2 goes here
</h2>
<div class="button">
<p>
<button id="dropdown">
<span id="dropdown_word"> V </span>
</button>
</p>
</div>
</div>
<div class="content">
<h4>
H4 goes here
</h4>
<p>
Text goes here
</p>
</div>
</div>
#dropdown
{
width:80px;
height:80px;
border-radius: 80px;
border-width: 0px;
transition: background-color 1s;
}
#dropdown_word
{
font-size:40px;
color:orangered;
}
#dropdown:hover
{
background-color: cyan;
}
.content{
visibility: hidden;
}
.parent:hover .content{
visibility: initial;
}

Answer 3

Use CSS syntax visibility: visible|hidden|collapse|initial|inherit;
#dropdown {
width: 80px;
height: 80px;
border-radius: 80px;
border-width: 0px;
transition: background-color 1s;
}
#dropdown_word {
font-size: 40px;
color: orangered;
visibility: hidden;
}
#dropdown:hover #dropdown_word {
background-color: cyan;
visibility: visible;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div class="heading">
<h2>
H2 goes here
</h2>
<div class="button">
<p>
<button id="dropdown">
<span id="dropdown_word"> V </span>
</button>
</p>
</div>
</div>
<div class="content">
<h4>
H4 goes here
</h4>
<p>
Text goes here
</p>
</div>

Answer 4

#content{display:none;}
#dropdown:hover + #content{display:block;}

Answer 5

You can do it using JS.
var element = document.getElementsByClassName('button')[0];
element.addEventListener("mouseover",function(){
document.getElementsByClassName('content')[0].style.display = "block";
});
element.addEventListener("mouseout",function(){
document.getElementsByClassName('content')[0].style.display = "none";
});
make content hide by default
.content {
display: none;
}

Answer 6

because the button isn't at all related with .content you can't do this accurately with css alone
you can do this with css only if .content has a relation with the button ( sibling,child,parent )
so in this case you have to use jquery.
check here jsfiddle
css code added : .content { display:none}
jquery code added :
$("#dropdown").hover(
function() {
$('.content').show()
},
function() {
$('.content').hide()
}
);