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

Posted 2023-03-06

【中文标题】使用 sass 在悬停时影响兄弟元素 [重复]

【英文标题】：Effect sibling element on hover using sass [duplicate]

【发布时间】：2020-02-20 10:52:02

【问题描述】：

我在一个 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 标签可见？

【参考方案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

【讨论】：

是的，令人惊讶的是它的工作原理。感谢您的快速回复。

【参考方案2】：

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

a:hover + p 
   visibility: visible;

【讨论】：

你也可以使用 :-a:hover >p visibility: visible;

没有@ArpitJain。 > 是直接子选择器，不适用于兄弟！

是的，它正在工作。谢谢

@ArpitJain > 用于第一个孩子。