使用 sass 在悬停时影响兄弟元素 [重复]

Question

我在一个 div 中有两个元素。其中一个是隐藏的，我想在有人将鼠标悬停在可见的那个上时显示它。通过正常的CSS我已经做到了，但是我无法通过SASS做到这一点。

这是我的代码：

<div class"main">
<a href="#"> Link to my account </a>
<p> john </p>
</div>

我试过了，但对我不起作用。

.main {
    position: relative;

    a {
        font-size: 19px;
    }

    p {
        position: absolute;
        top: 0;
        left: 0;
        font-size: 18px;
        background: gray;
        padding: 2px 6px;
        visibility: hidden;
        transition: all 0.3s ease;
    }

    a:hover p {
        visibility: visible;
    }
}

那么当有人使用 SASS 将鼠标悬停在 a 标签上时，如何使 p 标签可见？

Answer 1

相邻兄弟选择器选择与指定元素相邻的所有元素。以下更改应该对您有所帮助。

.main {
    position: relative;

    a {
        font-size: 19px;
    }

    p {
        position: absolute;
        top: 0;
        left: 0;
        font-size: 18px;
        background: gray;
        padding: 2px 6px;
        visibility: hidden;
        transition: all 0.3s ease;
    }

    a:hover + p {
        visibility: visible;
    }
}

参考：https://www.w3schools.com/Css/css_combinators.asp

Answer 2

这不是SASS 的问题，你只需要使用adjacent sibling combinator：

a:hover + p {
   visibility: visible;
}