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;
                }
            }
        }
    }
}

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