Html CSS类仅在悬停时可见-不工作

因此，我试图实现的最终结果是，当用户将鼠标悬停在面板上时，仅显示.panel text。在本例中，我尝试了overlay CSS类，因为它覆盖了整个div。但是无论我做什么，文本都不会显示，无论是悬停还是空闲，或者文本总是显示。下面是我试过的

.panel-text {
    display: none
} 

.panel-overlay:hover .panel-text {
     display: block
} 

以上仅隐藏。面板文本始终处于隐藏状态。下面是另一种尝试：

.panel-text { opacity: 0; }

.panel-overlay:hover panel-text { opacity: 1; }

现在我尝试了.panel title以及.panel按钮

任何帮助都是非常感谢的，所有其他的帖子都显示了我一直在使用的东西。即使我们必须在隐藏面板文本时显示图标，也可以解决问题

这是应该发生的事情 用这种方式做

.panel-text {
     visibility: hidden;
}

.panel-overlay:hover .panel-text {
     visibility: visible;
}

---

因此，由于某种原因，在尝试使用.panel overlay时，任何东西都不起作用，因此尝试图像包装就成功了。使用可见性或显示仍无法正确执行。下面的CSS工作了，工程正是提供的例子（链接）除了图标，将在以后的工作

面板文本{不透明度：0；}

面板主图像包装器：悬停。面板文本{不透明度：1；}

---

请提供一个链接。您也可以发布html代码吗？谢谢，以前尝试过此方法，但面板文本始终隐藏。因此，更改为.panel主图像包装器并使用不透明度就成功了。但是我想使用可见性，因为格式更干净。