时间戳

首页 > 解决方案 > 使用 sass 在悬停时影响兄弟元素

html - 使用 sass 在悬停时影响兄弟元素

问题描述

我在一个 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

标签： htmlcsssass

解决方案

这不是SASS问题，您只需要使用相邻的兄弟组合器：

a:hover + p {
   visibility: visible;
}

推荐阅读