影響同一父DIV的一個DIV懸停的幾個DIV

Question

目標：將一個盒子和所有其他盒子懸停（不透明）。

筆：http://codepen.io/su1ts/pen/eJJbWm

HTML：

<div class="outer"> 
    <div class="inner one">1</div> 
    <div class="inner two">2</div> 
    <div class="inner three">3</div> 
    <div class="inner four">4</div> 
</div> 

CSS：

.outer { 
    width: 100%; 
    height: 100%; 
} 

.inner { 
    width: 21%; 
    height: 100px; 
    background: #000; 
    margin-right: 1%; 
    float: left; 
    color: #fff; 
    text-align: center; 
} 

.inner:hover { 
    opacity: 1; 
} 

.one:hover + .two + .three { 
    opacity: 0.5; 
} 

我無法找到一個方法來添加對多個類.one：懸停類。

非常感謝幫助！

Answer 1

使用JavaScript來控制不透明度

$(document).ready(function(){ 
    $('.outer > .inner').mouseover(function(){ 
    $('.outer > .inner').css('opacity','0.5'); 
    $(this).css('opacity','1'); 
    }).mouseout(function(){ 
    $('.outer > .inner').css('opacity','1'); 
    }); 
}); 

實例 https://jsfiddle.net/rboschini/958za7kf/