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悬停在p标签上时，如何使a标签可见？

Answer 1

这不是SASS问题，您只需使用adjacent sibling combinator：

a:hover + p {
   visibility: visible;
}

Answer 2

相邻兄弟选择器选择所有与指定元素相邻兄弟的元素。以下更改将为您提供帮助。

.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

使用sass在悬停上影响同级元素

2 个答案: