Question

我在容器div中有8个嵌套的div。我想这样，当您将鼠标悬停在div上时，同一容器内所有其他div的不透明度都会发生变化。我敢肯定这完全可以使用CSS来完成（如果不是，我很乐意使用jQuery）。我已经尝试过使用容器的同级容器〜，这是可行的，但并非100％正确。

这是我的HTML：

<div class="container">
    <div class="something"><div class="element">Panel 1</div></div>
    <div class="something"><div class="element">Panel 2</div></div>
    <div class="something"><div class="element">Panel 3</div></div>
    <div class="something"><div class="element">Panel 4</div></div>
    <div class="something"><div class="element">Panel 5</div></div>
    <div class="something"><div class="element">Panel 6</div></div>
    <div class="something"><div class="element">Panel 7</div></div>
    <div class="something"><div class="element">Panel 8</div></div>
</div>

这是我的CSS：

.something:hover ~ div {
  opacity: 0.4;
}

这是一个有效的jsFiddle：https://jsfiddle.net/kxz4fjys/

您可以在jsFiddle上看到它的工作原理，但并不完全正确。有什么想法吗？

Answer 1

编辑：仅可用于CSS！

下面的CSS解决方案+旧的jQuery解决方案作为摘要中的注释！

如果将鼠标悬停在父级上，我们基本上可以给父级container的所有子级元素不透明：

.container:hover>* {
  opacity: 0.5;
}

AND 和 aswell 赋予我们在容器内悬停的特定孩子另一个悬停属性，以使其看起来像我们只给所有人提供了一些不透明性其他的孩子，但不是我们真正盘旋的孩子。

.container:hover>* {
  opacity: 0.5;
}

这里有完整的代码段：

/*$(".something").hover(
  function() { 
  $(this).siblings().css( "opacity", "0.5" );
  }
);

$(".container").mouseout(
function(){
  $(this).children().css( "opacity", "1" );
 
});
*/

.something {
  display: inline-block;
  margin: 20px;
  width: 100px;
  height: 100px;
}

.element {
  width: 100%;
  height: 100%;
  display: inline-block;
  background: #DDDDDD;
  text-align: center;
  opacity: 1;
}
.container:hover .something {
  opacity: 0.4;
}
.container:hover .something:hover{
  opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="something">
    <div class="element">Panel 1</div>
  </div>
  <div class="something">
    <div class="element">Panel 2</div>
  </div>
  <div class="something">
    <div class="element">Panel 3</div>
  </div>
  <div class="something">
    <div class="element">Panel 4</div>
  </div>
  <div class="something">
    <div class="element">Panel 5</div>
  </div>
  <div class="something">
    <div class="element">Panel 6</div>
  </div>
  <div class="something">
    <div class="element">Panel 7</div>
  </div>
  <div class="something">
    <div class="element">Panel 8</div>
  </div>
</div>

JS小提琴：https://jsfiddle.net/5oe8tdug/

悬停时更改容器内的所有其他div

1 个答案: