Html 错误的伪选择器

我试图改变“特价左块”和“特价右块”的伪属性：悬停在“特价断路器”上，但似乎我选择了错误的属性。你知道我做错了什么吗

当我悬停时不会发生任何事情，但我希望更改背景颜色！：）

希望这里的任何人都能帮助我

$orange:#FFFF00
.特价货柜
职位：相对
宽度：100%
背景：橙色
高度：400px
显示：块
.特价左座
宽度：50%
身高：100%
背景：深色（橙色，20%）
浮动：左
显示：内联
过渡：（背景2缓进）
.特价右座
宽度：50%
身高：100%
背景：浅色（橙色，30%）
显示：内联
浮球：对
过渡：（背景2缓进）
.特别优惠
z指数：4
位置：绝对位置
保证金：自动
左：0
右：0
排名：0
底部：0
显示：内联
背景：浅色（橙色，40%）
边界半径：75px
宽度：150像素
高度：150像素
&：悬停
.特价左座
背景:#333333
.特价右座
背景:#333333

如果

特价左侧块

和

特价右侧块

都是

特价破坏者

的子元素，那么您编写的方法会起作用，但相反，它们三个都是兄弟元素

您需要使用常规同级选择器

~

您也可以将

+

用于

。特价左挡

和

~

仅用于

。特价右挡

，因为

。特价左挡

直接位于

特价断路器之后

有很多方法可以实现这个特定示例。但我建议这样做：

&:hover
    ~ .special-offer-left-block
        background: #333333

    ~ .special-offer-right-block
        background: #333333

~combinator分隔两个选择器，仅当第二个元素前面有第一个元素时，才匹配第二个元素，并且两个元素共享一个公共父元素

---

有关更多信息，请参见此处

如果

特价左侧块

和

特价右侧块

是

特价断路器

的子元素，那么您编写它的方式会起作用，但相反，它们三个都是兄弟元素

您需要使用常规同级选择器

~

您也可以将

+

用于

。特价左挡

和

~

仅用于

。特价右挡

，因为

。特价左挡

直接位于

特价断路器之后

有很多方法可以实现这个特定示例。但我建议这样做：

&:hover
    ~ .special-offer-left-block
        background: #333333

    ~ .special-offer-right-block
        background: #333333

~combinator分隔两个选择器，仅当第二个元素前面有第一个元素时，才匹配第二个元素，并且两个元素共享一个公共父元素

有关更多信息，请参见此处