Css 使用：悬停显示div

我不想用js做我想做的事。所以我想在不使用js的情况下悬停div时显示它

这是我的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;
}

我做了一个jsfiddle：

---

所以我只想通过悬停来显示文本，但它不起作用，我该怎么做呢？

您目前的方式不起作用，因为您无法悬停

隐藏的
div
。您需要做的是创建一个可见的父
div
，捕获
悬停
事件，并在发生时显示子
div

HTML

您不能将元素悬停在
display:none
或
visibility:hidden
上，因为它应该不存在，请执行以下操作之一：

将
可见性：隐藏
更改为
不透明度：0
，然后将鼠标悬停在其上方时触发它1



.testHover{
宽度：100px；
高度：100px；
位置：相对位置；
}
.背景{
宽度：100px；
高度：100px；
背景：粉红色；
}
凯西先生{
不透明度：0；
背景：绿色；
位置：绝对位置；
顶部：0px；
z指数：999；
}
.cache:悬停{
不透明度：1；
}

我是你的朋友
不能将隐藏元素悬停。但是您可以使用
不透明度：0
悬停元素

.cache{
不透明度：0；
}
.cache:悬停{
不透明度：1；
}


.testHover{
宽度：100px；
高度：100px；
位置：相对位置；
}
.背景{
宽度：100px；
高度：100px；
背景：粉红色；
}
凯西先生{
不透明度：0；
背景：绿色；
位置：绝对位置；
顶部：0px；
z指数：999；
}
.cache:悬停{
不透明度：1；
}

我是你的朋友

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

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