CODEWITHSUNDEEP
htmlcss
Mehul Chachada
Mehul Chachada

Reputation: 583

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>

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?

Upvotes: 2

Views: 9525

Answers (6)

Mihai T
Mihai T

Reputation: 17687

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()
  }
);

Upvotes: -1

R. Arnone
R. Arnone

Reputation: 423

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.

Upvotes: 3

Mr.7
Mr.7

Reputation: 2713

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;
}

Upvotes: 0

Milo Shen
Milo Shen

Reputation: 56

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

Upvotes: 0

Mahendra Kulkarni
Mahendra Kulkarni

Reputation: 1507

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>

Upvotes: 0

Yasin Yaqoobi
Yasin Yaqoobi

Reputation: 2040

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; 
}

Upvotes: 0

Related Questions