1

私は1つの透明な要素の下にいくつかの要素を持っています（ただし、目に見えるものがあります）。しかし、パディングがマウスイベントの通過を許可していないようです。マウスを下の要素の 1 つに合わせると色が変わり、離すとゆっくりと元の色に戻ります。しかし、その上の要素がそれらを覆っている領域では、ホバーは通過しません。これらのイベントを下位の要素に渡す方法を知っている人はいますか?

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

2 に答える 2

-1

あなたが探しているのはこれだと思います：

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

ユーザーが.gridBoxをホバリングしているという条件で、.gridBoxと子を選択するだけです

于 2013-04-10T05:40:06.363 に答える