Question

我有三个child，如下所示：

.U:nth-child(1), 
.U:nth-child(2), 
.U:nth-child(3)

这三个都具有box-shadow的效果。
现在，如何在box-shadow上进行悬停时删除:nth-child(2)上的:nth-child(1)？我还想在其余的鼠标悬停时删除box-shadow。

Answer 1

.container {
  display: flex;
}

.box {
  width: 50px;
  height: 50px;
  margin: 20px;
  background: tomato;
  box-shadow: 0 0 0 4px #000;
}

.box:hover {
   box-shadow: none;
}

.box:nth-child(1):hover + .box:nth-child(2) {
  box-shadow: none;
}

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Answer 2

当您将鼠标悬停在容器中的任何位置时，可以使用诸如.Container:hover .U之类的规则从所有子级中删除阴影，然后添加.Container .U:hover以仅将阴影添加回悬停的元素。

这不是您所要求的；无法将鼠标悬停在后面的元素上以影响前面的元素。

第n个孩子的盒子阴影

2 个答案: