将鼠标悬停时显示隐藏的div

Question

I have aa hidden div and I would like to display it when it is hovered over using CSS. Unfortunately, no matter what I do, the CSS hover selector does not seem to work. In the chrome developer's tools, I could show the div by forcing the :hover state, but otherwise it does not work.

here is my code

 .invisible{ display: none; border: 2px solid red; } .invisible:hover{ display: block; } 

 <div class="invisible"> Text text text </div> 

Answer 1

An element with display: none can not be hovered over as it takes up no space in the document. You can set the element's opacity to 0 initially and change the opacity to 1 when it is hovered over to make it not visible but still take up space in the document and thus will be able to be hovered over.

 .invisible{ opacity: 0; border: 2px solid red; } .invisible:hover{ opacity: 1; } 

 <div class="invisible"> Text text text </div> 

If you want the div to appear smoothly, you can use the transition property. Since only the opacity changes, you can add an opacity transition like this: transition: opacity 1s . 1s is the duration of the transition (one second). You can change it to make the div appear slower or faster.

 .invisible{ opacity: 0; border: 2px solid red; transition: opacity 1s; } .invisible:hover{ opacity: 1; } 

 <div class="invisible"> Text text text </div> 

Answer 2

See this fiddle, This might help, what you are trying to achieve. You can adjust hover area using parent div dimensions. https://jsfiddle.net/pcwudrmc/37399/

 .parent { padding: 20px; } .parent .child { display: none; background: red; padding: 20px; text-align: center; } .parent:hover .child { display: block; } 

 <div class="parent"> <div class="child"> Hello, World! </div> </div> 

Answer 3

You could use visibility :

 .content .invisible { visibility: hidden; border: 2px solid red; } .content:hover .invisible { visibility: visible; } 

 <div class="content"> <div class="invisible"> <span>Text text text</span> </div> </div> 

Make sure to add a parent div, otherwise it wouldn't work on Chrome 23+.

Answer 4

 .invisible{ opacity: 0; border: 2px solid red; transition: all 1s; } .invisible:hover{ opacity: 1; transition: all 1.5s; } 

 <div class="invisible"> Text text text </div>