影响几个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：hover类上添加多个类的方法。

非常感谢帮助！

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/