css - 显示一个 :hover 的 div

Question

我不想用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:https://jsfiddle.net/g8ud4ck0/3/

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

Answer 1

您目前的操作方式不起作用，因为您无法悬停 隐藏的div。您需要做的是创建一个可见的父 div，捕获 hover 事件并在该事件发生时显示子 div。

HTML

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

CSS

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