Question

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

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;
}

Answer 1

由于你没有发布你的代码，我猜你正在使用灯箱，悬停父元素和制作动画。我建议你看看这个问题已经解决了 jQuery hover problem due to z-index

Answer 2

我认为你在寻找的是：

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

它只选择.gridBox加上条件上的任何子项用户正在悬停.gridBox

将鼠标悬停在HTML中的下方元素中

2 个答案: