我在一个透明元素下面有几个元素(尽管其中有一些东西是可见的)。但填充似乎不允许鼠标事件通过。我有它，所以当鼠标悬停在较低的元素之一上时，它会改变颜色，然后当它离开时，它会慢慢变回原来的颜色。但对于其上方元素覆盖的区域，悬停不会通过。有谁知道如何让这些事件传递到较低的元素？
这是我的精简代码。每当页面调整大小时都会创建网格框，因此它们总是填充背景。像<div id="content">之类的东西尽管是透明的，但仍位于背景前面。因此这些框是可见的，但您无法与它们交互。
HTML
<body>
<div id="background">
<canvas class="gridBox" id="grid1x1"></canvas>
<canvas class="gridBox" id="grid2x1"></canvas>
<canvas class="gridBox" id="grid3x1"></canvas>
...
<canvas class="gridBox" id="grid18x8"></canvas>
</div>
<div id="header">
<p id="logo"><img src="img/logo.png"></p>
</div>
<div id="content">
<p>Nothing here yet</p>
</div>
<div id="footer">
</div>
</body>
CSS
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;
}
最佳答案
尝试在CSS中使用pointer-events: none;。 #content 元素将不再检测鼠标，但下面的框将检测到它。
#content {
pointer-events: none;
}
关于javascript - 将鼠标事件传递给 HTML 中下面的元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15931050/