html - 悬停在子 div 上在父 div 上添加阴影

Question

我正在做的是，当我将鼠标悬停在我的文本上时，我必须在父 div 上显示阴影。我尝试了下面的代码并且它正在工作，但是如果我删除悬停，那么我的按钮将不可点击。

因为我习惯 pointer-events: none;了父 div。有没有其他最好的方法可以将鼠标悬停在子 div 上并在父 div 上留下阴影pointer-events: none;？我的父 div 上有 4-5 个按钮。

.box {
  width: 400px;
  height: 400px;
  position: relative;
  margin: 40px;
  pointer-events: none;
  background-color: #fff;
  border: 1px solid #f1f1f1;
}

.box .child {
  position: absolute;
  right: 20px;
  top: 20px;
  pointer-events: auto;
}

.box:hover {
  -webkit-box-shadow: 0px 0px 13px -9px rgba(0, 0, 0, 1);
  -moz-box-shadow: 0px 0px 13px -9px rgba(0, 0, 0, 1);
  box-shadow: 0px 0px 13px -9px rgba(0, 0, 0, 1);
}

<div class="box">
  <div class="child"><a href="">Hover me</a></div>
  <a href="" class="clickme">click me</a>
</div>

标签： htmlcsshover

Answer 1

使用伪元素制作阴影：

.box {
  width: 400px;
  height: 400px;
  position: relative;
  margin: 40px;
  background-color: #fff;
  border: 1px solid #f1f1f1;
  transform:translate(0); /* to make the fixed element relative to the parent */
}

.box .child {
  position: absolute;
  right: 20px;
  top: 20px;
}
.box .child::before {
  content:"";
  position:fixed; /* not absolute but fixed */
  top:0;
  left:0;
  right:0;
  bottom:0;
  pointer-events: none;
}

.child:hover::before {
  -webkit-box-shadow: 0px 0px 13px -9px rgba(0, 0, 0, 1);
  -moz-box-shadow: 0px 0px 13px -9px rgba(0, 0, 0, 1);
  box-shadow: 0px 0px 13px -9px rgba(0, 0, 0, 1);
}

<div class="box">
  <div class="child"><a href="">Hover me</a></div>
  <a href="" class="clickme">click me</a>
</div>