Mehul Chachada Mehul Chachada - 3 months ago 4x
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 goes here
<div class="button">
<button id="dropdown">
<span id="dropdown_word"> V </span>
<div class="content">
H4 goes here
Text goes here

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


All you have to do is move the .content div inside the .button div and apply the following CSS:

     display: none;

.button:hover .content{
     display: block;

Here is the JSFiddle.