我試圖在您將滑鼠懸停在父容器上時顯示文本（而父容器的不透明度為 0.5），但由于某種原因它不會出現。我嘗試了三四種不同的方法，但無論如何都不會出現:((
下面是我目前的代碼。謝謝大家！
HTML:
<!--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>
CSS:
.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;
}
uj5u.com熱心網友回復：
一切似乎都在相應地作業。我繼續添加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以便實際單詞“查看專案”仍然可點擊并且在滾動父容器時不會消失。
uj5u.com熱心網友回復：
您需要設定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>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/353047.html