将鼠标悬停在 child div 上添加阴影 parent div

Question

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

因为我用了pointer-events: none;到parentdiv。在没有 pointer-events: none; 的情况下，是否有任何其他最佳方法可以将鼠标悬停在 child div 上并在 parent div 上显示阴影？我的 parent 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>

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>

将鼠标悬停在 child div 上添加阴影 parent div

Hover on child div add a shadow on parent div

html

css

hover