Display a div with :hover

Question

I don't want to use js to do what I want to do. So I want to display a div when I hover it without use the js.

Here is my css :

.testHover{
  width : 100px;
  height : 100px; 
  position : relative;
}

.background{
   width : 100px;
  height : 100px;
  background : pink;
}

.cachee{
  visibility : hidden;
  background : green;
  position : absolute;
  top :0px;
  z-index : 999;
}

.cachee:hover{
  visibility : visible;
}

I made a jsfiddle : https://jsfiddle.net/g8ud4ck0/3/

So I want to display the text just by hover it, but it doesn't work, how can I do please ?

Possible duplicate of [Using only CSS, show div on hover over ](http://stackoverflow.com/questions/5210033/using-only-css-show-div-on-hover-over-a) — Michał Perłakowski, Jan 10 '16 at 17:54

score 0 · Accepted Answer · answered Jan 10 '16 at 17:57

The way you're doing it at the moment doesn't work because you can't hover a div that is hidden. What you need to do is create a parent div that is visible, capture the hover event and show the child div when that happens.

HTML

<div class="parent">Hover me <div class="child">I'm hidden</div></div>

CSS

.child{visibility: hidden;}
.parent:hover .child{visibility: visible;}

Mi-Creativity · Answer 2 · 2016-01-10T18:09:24.787

You can't hover an element with display:none or visibility:hidden because it is supposed to be not exist, instead do one of these:

change visibility:hidden to opacity:0, then trigger it 1 when hover over it

JS Fiddle 1

.testHover{
  width : 100px;
  height : 100px; 
  position : relative;
}
.background{
   width : 100px;
  height : 100px;
  background : pink;
}
.cachee{
  opacity:0;
  background : green;
  position : absolute;
  top :0px;
  z-index : 999;
}
.cachee:hover{
  opacity:1;
}

<div class="testHover">
  <div class="background"></div>
  <div class="cachee"><a>Je suis une div cachée</a></div >
</div>

use the hover over the preceding div .background to trigger the visibility of the .cachee using this rule .background:hover ~ .cachee,.cachee:hover

JS Fiddle 2

.testHover{
  width : 100px;
  height : 100px; 
  position : relative;
}
.background{
   width : 100px;
  height : 100px;
  background : pink;
}
.cachee{
  visibility : hidden;
  background : green;
  position : absolute;
  top :0px;
  z-index : 999;
}
.background:hover ~ .cachee,.cachee:hover {
  visibility : visible;
}

<div class="testHover">
  <div class="background"></div>
  <div class="cachee"><a>Je suis une div cachée</a></div >  
</div>

trigger the visibility on parent hover

JS Fiddle 3

.testHover{
  width : 100px;
  height : 100px; 
  position : relative;
}
.background{
   width : 100px;
  height : 100px;
  background : pink;
}
.cachee{
  visibility : hidden;
  background : green;
  position : absolute;
  top :0px;
  z-index : 999;
}
.testHover:hover .cachee {
  visibility : visible;
}

<div class="testHover">
  <div class="background"></div>
  <div class="cachee"><a>Je suis une div cachée</a></div >  
</div>

score 0 · Answer 3 · answered Jan 10 '16 at 18:04

You can't hover a hidden element. But you can hover an element with opacity: 0.

.cachee {
  opacity: 0;
}
.cachee:hover {
  opacity: 1;
}

.testHover {
  width: 100px;
  height: 100px;
  position: relative;
}
.background {
  width: 100px;
  height: 100px;
  background: pink;
}
.cachee {
  opacity: 0;
  background: green;
  position: absolute;
  top: 0px;
  z-index: 999;
}
.cachee:hover {
  opacity: 1;
}

<div class="testHover">
  <div class="background">
  </div>
  <div class="cachee">
    <a>Je suis une div cachée</a>
  </div>
</div>

Display a div with :hover

3 Answers3