悬停时隐藏图像 - SCSS

Question

我试图隐藏我的图像，以便在我将鼠标悬停在按钮上时显示它后面的图像。出于某种原因，我无法让它工作 - 我觉得我的代码应该可以工作。我试过 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/

Answer 1

您需要更改按钮在标记中的位置

<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>

以及将 selector + 替换为 ~（此 selector 将 select .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

悬停时隐藏图像 - SCSS

Hide image on hover - SCSS

css

image

sass

hover