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>
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>
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>
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+.
.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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.