悬停时隐藏图像 - SCSS答案

【问题标题】：Hide image on hover - SCSS悬停时隐藏图像 - SCSS
【发布时间】：2021-12-02 00:22:52
【问题描述】：

我试图隐藏我的图像，以便每当我将鼠标悬停在按钮上时它就会显示它背后的图像。出于某种原因，我无法让它工作——我觉得我的代码应该可以工作。我已经尝试过 display:none 和 block 悬停，甚至尝试过 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/

【问题讨论】：

Selector + 是选择当前元素之后的下一个元素。因此，当您设置：.figure-button:hover + .back 时，它会在 .figure-button 之后搜索类为 .back 的兄弟元素。这就是它与.figure-caption-test 一起工作的原因。 CSS 中没有“上一个”选择器。因此，如果您只想在 CSS 中这样做，则必须更改您的 html

标签： css image sass hover

【解决方案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>

以及将选择器 + 替换为 ~ （此选择器将选择 .figure-button 之后具有类 .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

【讨论】：