Наведите указатель мыши на дочерний div, добавьте тень на родительский div

Question

Я делаю следующее: когда я наводю курсор на свой текст, мне нужно показать тень на родительском div. Я попробовал приведенный ниже код, и он работает, но если я уберу наведение, мои кнопки не будут кликабельными.

Потому что я использовал pointer-events: none; для родительского div. Есть ли другой лучший способ навести курсор на дочерний div и тень на родительский div без pointer-events: none;? У меня есть 4-5 кнопок на моем родительском div.

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