Mehul Chachada Mehul Chachada - 1 year ago 55
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

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download