影响同一父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/