SCSS 在悬停时更改同级颜色

Question

我有一个菜单，我想在悬停时更改 link 颜色，但也将其所有兄弟颜色更改为另一种颜色。没有 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 时应用“其他”颜色，然后在悬停 link 时覆盖“其他”颜色。

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

SCSS 在悬停时更改同级颜色

SCSS Change sibling color on hover

css

menu

sass

hover

siblings