Mehul Chachada Mehul Chachada - 5 months ago 6
CSS Question

How to display a div on hover of button using css

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>





Now i want to display the class content when the mouse is hover on button and before hover the class content should not be visible to user,what css code can be used to get the above output

Answer

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.