How to display a div on hover of button using css

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?

Possible duplicate of [How to affect other elements when a div is hovered](http://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-a-div-is-hovered) — StudioTime, Jun 27 '16 at 13:13

R. Arnone · Accepted Answer · 2016-06-27T13:34:49.133

3

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.

edited Jun 27 '16 at 13:34

answered Jun 27 '16 at 13:28

R. Arnone

423
4
15

Thanks this works does this code effect if i change the width and position of the content class or it would still work irrespective of it ! – Mehul Chachada Jun 27 '16 at 13:35
Depending on how large you make the `.content` class you may want to adjust the `.button` class to fit it or else you could see the content overlapping. – R. Arnone Jun 27 '16 at 13:37

Yasin Yaqoobi · Answer 2 · 2016-06-27T13:22:02.717

0

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

edited Jun 27 '16 at 13:22

answered Jun 27 '16 at 13:16

Yasin Yaqoobi

1,888
3
27
38

it doesnt display the text on hover – Mehul Chachada Jun 27 '16 at 13:21
did u add .parent div ? – Yasin Yaqoobi Jun 27 '16 at 13:22
the problem is that when ever i hover near the button the text get displayed i wanted it only when its hover at button – Mehul Chachada Jun 27 '16 at 13:27
I have already explained this in my answer. See @Mihai answer. – Yasin Yaqoobi Jun 27 '16 at 13:29

score 0 · Answer 3 · answered Jun 27 '16 at 13:23

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>

you are hiding the word inside the button i want to hide the class content and on hovering button it should be visible can you edit your code ? i think it might work — Mehul Chachada, Jun 27 '16 at 13:29

score 0 · Answer 4 · answered Jun 27 '16 at 13:28

0

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

answered Jun 27 '16 at 13:28

Milo Shen

56
3

2

While this may answer the question, maybe it's better to insert a description about why the above code "works". This to inform future people why this behavior is happening. – Mathlight Jun 27 '16 at 20:16

score 0 · Answer 5 · answered Jun 27 '16 at 13:31

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

Mihai T · Answer 6 · 2016-06-27T13:48:41.853

-1

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

edited Jun 27 '16 at 13:48

answered Jun 27 '16 at 13:24

Mihai T

17,254
2
23
32

is there any way possible with CSS i dont know much about jquery i am still learning HTML and CSS – Mehul Chachada Jun 27 '16 at 13:30
as i said in my answer , you can do this only with css if button and content have a relation between them like being in the same container and on the same level ( siblings ) eg :

– Mihai T Jun 27 '16 at 13:47

How to display a div on hover of button using css

6 Answers6