CODEWITHSUNDEEP
htmlcss
user10177573
user10177573

Reputation:

Show hidden div when it is hovered over

I have a a 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>

Upvotes: 2

Views: 115

Answers (4)

Reza Saadati
Reza Saadati

Reputation: 5419

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+.

Upvotes: 1

Amit Mankotia
Amit Mankotia

Reputation: 135

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>

Upvotes: 1

Unmitigated
Unmitigated

Reputation: 89214

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>

Upvotes: 3

Ankit Jaiswal
Ankit Jaiswal

Reputation: 274

.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>

Upvotes: 0

Related Questions