Javascript 在HTML中将鼠标悬停传递给下面的元素

我在一个透明元素下面有几个元素（其中有些东西是可见的）。但似乎填充不允许鼠标事件通过。我有它，所以当鼠标悬停在一个较低的元素上时，它会改变颜色，然后当它离开时，它会慢慢地回到原来的颜色。但是对于上面的元素覆盖的区域，悬停不会通过。有人知道如何让这些事件传递到较低的元素吗

HTML

---

由于您没有发布代码，我猜您正在使用类似lightbox、悬停父元素和制作动画的东西。 我建议你看看这个问题已经解决了

---

我想你要找的是：

.gridBox:hover, .gridBox:hover * {
  background-color:green;
  transition:background-color 0s linear;
}

它只选择.gridBox和条件中的任何子项

---

用户正在悬停。gridBox

您能显示代码吗？问题是，高于gridBox的元素水平/垂直跨越，仍然位于gridBox元素的前面。它们看起来是透明的，但它们仍然在前面。我无法理解您的评论，因为您的代码没有使任何元素透明。也许你的代码不完整？

body,html{
padding:0;
margin:0;
}
#background{
padding:0;
margin:0;
width:110%;
height:100%;
z-index:-1;
position:fixed;
top:0;
left:0;
overflow:visible;
line-height: 0;
}
.gridBox{
margin:0;
padding:0;
height:50px;
width:50px;
border:1px solid #000000;
background:black;
transition:background-color 1s linear;
}
.gridBox:hover{
background-color:green;
transition:background-color 0s linear;
}

.gridBox:hover, .gridBox:hover * {
  background-color:green;
  transition:background-color 0s linear;
}