Q:

Faulty pseudo selector

I am trying to change the properties of "special-offer-left-block" and "special-offer-right-block" with the pseudo :hover on "special-offer-breaker" but it seems like I select them incorrect. Any ideas on what I do wrong?
Nothing happens when I hover, but I want the background colors to change! :)
Hope anyone here can help me!
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

A:

the way you wrote it would've worked ifspecial-offer-left-blockand special-offer-right-block were child elements of the special-offer-breaker, but instead, all 3 of them are siblings so
you need to use the general sibling selector ~
you could also use + for .special-offer-left-block and ~ only for .special-offer-right-block because .special-offer-left-block is directly after the special-offer-breaker
there are a number of ways to do this specific example. but i suggest doing like so :
&:hover
    ~ .special-offer-left-block
        background: #333333

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

The ~ combinator separates two selectors and matches the second element only if it is preceded by the first, and both share a common parent.
for more information see here General sibling selectors

