如何在hover自身元素时，同时为自身及兄弟元素应用CSS样式？

你需要单独为自身元素的:hover状态定义样式，因为&:hover ~ #myId是兄弟选择器，仅会匹配当前元素之后的#myId元素，不会作用于触发hover的自身元素。以下是几种可行的写法：

1. 分别定义不同样式（Sass/Scss） #

如果自身和兄弟元素需要不同的hover样式，可以分开写：

// 假设你的元素类名为 .trigger
.trigger {
  // 自身hover时的样式
  &:hover {
    background-color: #f0f0f0;
    color: #222;
  }
  // hover时给兄弟#myId设置样式
  &:hover ~ #myId {
    border-color: #ff4400;
    transform: scale(1.05);
  }
}

2. 合并选择器（适用于相同样式） #

如果自身和#myId需要完全相同的hover样式，可以用逗号合并两个选择器：

.trigger {
  &:hover,
  &:hover ~ #myId {
    padding: 8px 12px;
    border-radius: 4px;
    background-color: #e6e6e6;
  }
}

3. 原生CSS写法 #

不用预处理器的话，直接写原生CSS即可：

.trigger:hover {
  background-color: #f0f0f0;
  color: #222;
}
.trigger:hover ~ #myId {
  border-color: #ff4400;
  transform: scale(1.05);
}

核心逻辑就是：兄弟选择器~只能选中当前元素之后的同级元素，所以必须单独为触发hover的元素本身设置:hover样式，才能实现两者同时生效的效果。

内容的提问来源于stack exchange，提问作者Red Baron