jquery - 当另一个元素悬停时，如何从元素中删除框阴影效果？

Question

结构：

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

.inner_box 具有盒子阴影效果。当 .box 悬停时，我想从 .inner_box 中删除阴影效果。除了使用 JQuery，还有其他方法可以做到这一点，最好是 CSS3？

还请向我展示如何在 JQuery 中执行此操作的示例。谢谢！

Answer 1

只需使用这个 css 这将在这里演示

.box:hover .inner_box {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

Answer 2

这是一个仅限 css 的解决方案。

.inner_box {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  box-shadow: 1px 1px 1px black;
}

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

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

Answer 3

您必须将box-shadow背面重置为其默认状态none：：

.box:hover .inner_box {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

Answer 4

在悬停时添加此属性

color: none;