CSS/HTML：悬停时显示div不起作用

我想要的是在某个地方有一个不可见的div，当你将鼠标悬停在它上面时，它就会出现（可能有一个过渡，不需要）。因此，我尝试了以下方法：

--CSS代码

div.appearingBox {
display: none;
width: 100px;
height: 100px;
}

div.appearingBox:hover {
display: block;
width: 100px;
height: 100px;
background-color: rgb(0,0,0);
border: 1px solid rgb(0,0,255);
}

--HTML代码（已添加）

---

这不管用。。。请帮忙

您需要一个包装div。因为它不可见，所以无法响应：hover。请注意，

：hover

位于包装器上，而不是元素本身。这是因为包装是“可见”但透明的

HTML:

<div class="appearingBox">
    <div>Hidden</div>
</div>

---

（编辑为更清晰的版本）

您需要一个包装div。因为它不可见，所以无法响应：hover。请注意，

：hover

位于包装器上，而不是元素本身。这是因为包装是“可见”但透明的

HTML:

<div class="appearingBox">
    <div>Hidden</div>
</div>

---

（编辑为更清晰的版本）

是否尝试类似的内容？想要这样的东西吗？我同意，很好地解决了这个问题。我更新了Davy8的答案，添加了一个过渡@superUntitled这样一个简单的东西，但使它更优雅，我已经在我所有的悬停上使用了一段时间了，希望更多的开发人员也能这样做。很好的补充：）我同意，很好地解决了这个问题。我已经更新了Davy8的答案，添加了一个过渡@superUntitled这样一个简单的东西，但使它更优雅，我已经在我所有的悬停上使用了一段时间了，希望更多的开发人员也能这样做。伟大的补充：）

.appearingBox div {
    visibility: hidden;
    width: 100px;
    height: 100px;
}

.appearingBox:hover div {
    visibility: visible;
    width: 100px;
    height: 100px;
    background-color: rgb(0,0,0);
    border: 1px solid rgb(0,0,255);
}