文本在css中悬停时仍然隐藏？答案

【问题标题】：Text remains hidden on hover in css?文本在css中悬停时仍然隐藏？
【发布时间】：2021-12-21 13:24:40
【问题描述】：

我试图在您将鼠标悬停在父容器上时显示文本（而父容器的不透明度为 0.5），但由于某种原因，它不会出现。我尝试了三四种不同的方法，但无论如何都不会出现:((

下面是我当前的代码。

.project{
    position: relative;
    transition: all 0.2s ease-in-out;
}
.project:hover{
    opacity: 0.5;
}
.view-project{
    position: absolute;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s, visibility 0.2s;
}
.project:hover .view-project{
    visibility: visible;
    opacity: 1;
}

<!--Parent class-->
<div class="project">
    <div class="project-text">
         <!--other things in here-->
         <!--This is the text I want hidden and then to appear upon hover-->
         <h2 class="view-project">View Project</h2>
    </div>
</div>

【问题讨论】：

您能否向父类project 提供将成为子类的实际代码，以便我们了解您的:hover 目前是如何工作的？
任何答案都解决了您的问题吗？

标签： html css hover

【解决方案1】：

一切似乎都在相应地工作。我继续添加font-weight: bold; 以确保我可以看到悬停内容。另外，我注意到悬停时的不透明度过渡，以便在仔细检查时不会产生任何奇怪的效果。

.project{
    position: relative;
    transition: all 0.2s ease-in-out;
    height: 50vh;
    width: 50vw;
}
.project:hover{
    /* opacity: 0.5; */
}
.view-project{
    position: absolute;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s, visibility 0.2s;
}
.project:hover .view-project{
    visibility: visible;
    opacity: 2;
    font-weight: bold;
}

<!--Parent class-->
<div class="project">
    <div class="project-text">
         <!--other things in here-->
         <p>other things in here</p>
         <!--This is the text I want hidden and then to appear upon hover-->
         <h2 class="view-project">View Project</h2>
    </div>
</div>

此外，我将您的父容器 project 更改为 50vw / 50vh viewport，这样实际单词“查看项目”仍然可以点击，并且在滚动离开父容器时不会消失。

【讨论】：

【解决方案2】：

您需要将width 和height 设置为.project 类选择器才能显示悬停效果。就是这样。

.project{
  width: 100%;
  height: 150px;
  position: relative;
  transition: all 0.2s ease-in-out;
}
.project:hover{
    opacity: 0.5;
}
.view-project{
    position: absolute;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s, visibility 0.2s;
}
.project:hover .view-project{
    visibility: visible;
    opacity: 1;
}

<!--Parent class-->
<div class="project">

    <div class="project-text">
         hover here
         <!--other things in here-->
         <!--This is the text I want hidden and then to appear upon hover-->
         <h2 class="view-project">View Project</h2>
    </div>
</div>

【讨论】：

谢谢！不明白为什么，但奇怪的是，这行得通:)
@JosiahBall 不客气 ;-)