css - SCSS 在悬停时更改兄弟颜色

Question

我有一个菜单，我想在悬停时更改链接颜色，但也将其所有兄弟姐妹更改为另一种颜色。没有JS这可能吗？

HTML：

<ul>
    <li>
        <a>lorem</a>
    </li>
    <li>
        <a>ipsum</a>
    </li>
</ul>

SCSS：

ul {
    $primary-color: orange;

    > li {
        > a {
            color: #000;
            border-bottom: solid 2px transparent;

            &:hover {
                color: $primary-color;
                border-color: $primary-color;

                & + a:not(:hover) {
                    color: red;
                }
            }
        }
    }
}

标签： csssassmenuhoversiblings

Answer 1

a当一个标签悬停时，您不能影响其他标签。您在这里唯一真正的选择是在ul悬停时应用“其他”颜色，然后在悬停链接时覆盖“其他”颜色。

ul > li > a {
  color: #000;
  border-bottom: solid 2px transparent;
}
ul > li > a:hover {
  color: orange;
  border-color: orange;
}

ul:hover a {
  color: red;
}

<ul>
    <li>
        <a>lorem</a>
    </li>
    <li>
        <a>ipsum</a>
    </li>
    <li>
        <a>sit</a>
    </li>
    <li>
        <a>amet</a>
    </li>
</ul>

SCSS 版本：https ://codepen.io/3rror404/pen/OJMNyJg