CODEWITHSUNDEEP
css
libby
libby

Reputation: 634

CSS: Show an element only when you hover over it

The following hides the element, but I cannot recover when I hover over it. I've checked devtools to see that it is indeed rendered on the screen, I just can't see the contents of the div.

How do I make it so the div is visible only on hover?

.visible-on-hover {
  visibility: hidden;
}

.visible-on-hover:hover {
  visibility: visible !important;
}

Upvotes: 0

Views: 73

Answers (2)

connexo
connexo

Reputation: 56744

Elements with visibility: hidden; don't receive any mouse events, so :hover never triggers on such an element.

Instead of visibility, you can work with opacity:

div {
  background-color: orange;
  height: 200px;
  width: 400px;
  padding: 50px;
}

.visible-on-hover {
  opacity: 0;
  transition: opacity .3s ease;
}

.visible-on-hover:hover {
  opacity: 1;
}
<div class="visible-on-hover">visible only on hover</div>

Upvotes: 2

user15260712
user15260712

Reputation:

you can not hover, focus or select a hidden element. you can use opacity

.visible-on-hover {
  opacity: 0;
}

.visible-on-hover:hover {
  opacity: 1;
}

Upvotes: 1

Related Questions