CSS类仅在悬停状态下可见-不起作用

Question

因此，当用户将鼠标悬停在面板上时，我试图获得的最终结果仅显示 .panel-text 。在这种情况下，我尝试了覆盖CSS类，因为它覆盖了整个div。但是无论我执行什么操作，无论是悬停还是空闲，文本都不会显示，或者始终显示文本。下面是我尝试过的。

.panel-text {
    display: none
} 

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

以上内容仅始终隐藏.panel-text。下面是另一种尝试：

.panel-text { opacity: 0; }

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

现在，我尝试尝试 .panel-title 和 .panel-button 。

我们非常感谢您的帮助，显示的所有其他帖子都显示了我一直在使用的内容。即使在 .panel-text 隐藏的情况下我们必须显示图标也可以解决。

东西链接，这应该发生 Link

Answer 1

以这种方式进行。

.panel-text {
     visibility: hidden;
}

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

Answer 2

因此出于某种原因，尝试与 .panel-overlay 结合使用时没有任何效果，因此尝试使用图像包装器就可以了。使用可见性或显示仍无法正确执行。在CSS之下，可以找到除图标之外的确切示例示例（链接），以后可以使用。

panel-text {opacity：0; }

panel-mainimage-wrapper：hover .panel-text {opacity：1; }