鼠标悬停时更改容器内所有其他 div 元素

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上看到它基本工作但不完全正确。有什么想法吗？

- alexkodr

---

https://dev59.com/vnI-5IYBdhLWcg3whImk - Nenad Vracar

@NenadVracar 我认为在这种情况下只能使用CSS来完成 - 请看我的回答。我最初也认为这只能通过一些JS来完成，但显然我错了。 - DigitalJedi

Answer 1

编辑：这个方案可以只使用CSS实现！

以下是CSS解决方案和旧的jQuery解决方案（作为代码段中的注释）：

当我们将鼠标悬停在父容器上时，我们可以给所有子元素设置一些不透明度：

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

并且还要给我们悬停在容器中的特定子元素另外一个悬停属性，使其看起来像我们只对所有其他子元素给予一些不透明度，但是不包括我们实际悬停的那个。

.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 Fiddle: https://jsfiddle.net/5oe8tdug/

- DigitalJedi

---

这仅适用于您未像 OP 一样使用列的情况。在他的情况下，他最终会得到（奇怪的行为](https://jsfiddle.net/x5pormaf/)。 - Ibu

@Ibu 我使用与 OP 完全相同的 HTML，所以你的说法不可能是真的。 - DigitalJedi

谢谢Ibu，这正是我在寻找的纯CSS方法。感谢您花时间查看DigitalJedi，非常感谢，但是就像Ibu提到的那样，当我开始在嵌套的子div之间添加任何空格时，你的方法有点错误。 - alexkodr

@Ibu，我猜DigitalJedi没有看jsFiddle链接，而我忘记了传递所有的CSS。我的错。 - alexkodr

@alexgomy 我明白了...对不起。当你处于方框之间时，它仍然似乎是“悬浮”的。这个“错误”实际上不是一个错误，而是在子元素上定义宽度、高度和边距时发生的情况。我调整了我的答案，并分叉了一个新的小工具来消除这个问题：https://jsfiddle.net/5oe8tdug/ - 很高兴我能帮到你。 - DigitalJedi