我試圖隱藏我的影像，以便每當我將滑鼠懸停在按鈕上時，它就會顯示它后面的影像。出于某種原因，我無法讓它作業 - 我覺得我的代碼應該可以作業。我試過做 display:none 并阻止懸停，甚至嘗試過 z-index 但我仍然無法弄清楚。任何幫助表示贊賞，謝謝。
我目前隱藏了當我懸停按鈕時顯示的文本，所以我不確定這是否會影響它。但我已經完成了 SCSS。
<figure class="figure">
<img class="figure-image lazyload front"
src="/image.png">
<img class="figure-image lazyload back"
src="/image2.png">
<button class="figure-button" id="figure-button">REVEAL ANSWER</button>
<figcaption class="figure-caption-test" id="reveal-text">HiddenText</figcaption>
</figure>
我的 SCSS -
.figure-button:hover .figure-caption-test {
display: block;
}
.back {
opacity: 1;
}
.figure-button:hover .back {
opacity: 0!important;
}
JsFiddle - https://jsfiddle.net/2ukxfe47/1/
uj5u.com熱心網友回復：
您需要更改標記中按鈕的位置
<figure class="figure">
<button class="figure-button" id="figure-button">REVEAL ANSWER</button>
<img class="figure-image lazyload front"
src="/image.png">
<img class="figure-image lazyload back"
src="/image2.png">
<figcaption class="figure-caption-test" id="reveal-text">HiddenText</figcaption>
</figure>
以及用 ~ 替換選擇器 （此選擇器將選擇.figure-button具有 class之后的所有兄弟姐妹.figure-caption-test）
.figure-button:hover ~ .figure-caption-test {
display: block;
}
.back {
opacity: 1;
}
.figure-button:hover ~ .back {
opacity: 0!important;
}
' ' 指向您在它之后添加的下一個元素。在此處查看更多資訊：https : //www.w3schools.com/cssref/css_selectors.asp
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/317165.html
上一篇：如何使用C讀取影像
下一篇：去除android圖示的綠色背景