Затемнять другие элементы при ховере

Пример

HTML

<div id = "group">

  <div class = "sub_group"></div>

  <div class = "sub_group"></div>

  <div class = "sub_group"></div>

  <div class = "sub_group"></div>

</div>


CSS

.sub_group {
    height: 50px;
    background-color: yellow;
    -moz-transition: background-color 0.5s linear;
    -o-transition: background-color 0.5s linear;
    -webkit-transition: background-color 0.5s linear;
    transition: background-color 0.5s linear;
}

#group:hover .sub_group:not(:hover) {
    background-color: black;
}

result http://jsfiddle.net/2pa9d/1/