間違った疑似セレクタ

Question

私は "special-offer-left-block"と "special-offer-right-block"のプロパティをpseudo： "special-offer-breaker"のホバーで変更しようとしていますが、私はそれらを間違って選択します。私が間違っていることに関するアイデアは？

私はマウスを動かすと何も起こりませんが、背景の色を変えたいです！ :)

ここの誰かが私を助けることができます！

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 

Answer 1

あなたはspecial-offer-left-blockとspecial-offer-right-blockがspecial-offer-breakerの子要素だったが、その代わりに、それらのすべての3が兄弟であるので

あなたが使用する必要がある場合、それは働いてきただろうに書いた方法

+.special-offer-left-blockとの場合のみ使用できますであるため、.special-offer-left-blockは、この特定の例を実行する多くの方法があります。special-offer-breaker

があります。しかし、私はそうのようにやってお勧め：

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

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

〜コンビネータは、2つのセレクタを分離し、それが最初に先行されている場合にのみ、第二の要素と一致し、両方が共通の親を共有します。

詳細については、General sibling selectors

こちらをご覧ください