当另一个元素悬停时,如何从元素中删除盒子阴影效果？

Question

结构体:

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

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

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

Answer 1

只需使用这个css,这将在这里工作DEMO

.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;
}

演示

Answer 3

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

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