html - 错误的伪选择器

我正在尝试使用伪：hover更改“ special-offer-breaker”的“ special-offer-left-block”和“ special-offer-right-block”的属性，但是似乎我选择了它们不正确的属性。关于我做错什么的任何想法？

当我将鼠标悬停时没有任何反应，但是我希望改变背景颜色！ :)

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

http://codepen.io/oskarscholander/pen/zBpRwV

<div class="special-offer-container">
  <div class="special-offer-breaker"></div>
  <div class="special-offer-left-block"></div>
  <div class="special-offer-right-block"></div>
</div>


$orange: #FFFF00

.special-offer-container
    position: relative
    width: 100%
    background: $orange
    height: 400px
    display: block

.special-offer-left-block
    width: 50%
    height: 100%
    background: darken($orange, 20%)
    float: left
    display:inline
    transition: (background 2s ease-in)

.special-offer-right-block
    width: 50%
    height: 100%
    background: lighten($orange, 30%)
    display: inline
    float: right
    transition: (background 2s ease-in)

.special-offer-breaker
    z-index: 4
    position: absolute
    margin: auto
    left: 0
    right: 0
    top: 0
    bottom: 0
    display: inline
    background: lighten($orange, 40%)
    border-radius: 75px
    width: 150px
    height: 150px
    &:hover
        .special-offer-left-block
            background: #333333

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

最佳答案

如果special-offer-left-block和special-offer-right-block是special-offer-breaker的子元素，则您编写它的方式将起作用，但是，所有这三个元素都是同级的，因此

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

您也可以将+用于.special-offer-left-block，将~仅用于.special-offer-right-block，因为.special-offer-left-block直接在special-offer-breaker之后

有许多方法可以执行此特定示例。但我建议这样做：

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

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

〜组合器分隔两个选择器，并且仅在第二个选择器后面有第二个选择器时才与之匹配，并且两者都共享一个公共父项。

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

关于html - 错误的伪选择器，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38397050/