html - 悬停同一父级的一个 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/