將HTML元素傳遞給HTML中的元素

我在一個透明元素下面有幾個元素（它有一些東西可以看到）。但似乎填充不允許鼠標事件通過。當鼠標懸停在其中一個下面的元素上時，它會改變顏色，然後當它離開時，它會慢慢回覆到原來的顏色。但是對於它上面的元素覆蓋它們的區域，懸停不通過。有誰知道如何讓這些事件通過降低元素？將HTML元素傳遞給HTML中的元素

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

來源

2013-04-10 SalmonMode

你能顯示代碼嗎？ – 2013-04-10 05:15:16

您的代碼缺失 – 2013-04-10 05:15:25

既然你沒有張貼你的代碼，我猜你是用類似燈箱的工作，懸停父元素和製作動畫。我建議你看看這個問題已經解決 jQuery hover problem due to z-index

來源

2013-04-10 05:22:51

我想你正在尋找的是這樣的：

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

它只是選擇.gridBox再加上條件的任何兒童用戶正在盤旋.gridBox

來源

2013-04-10 05:40:06

問題是，上面的元素橫跨水平/垂直，仍然在GridBox元素的前面。它們看起來很透明，但仍然在前面。 – SalmonMode 2013-04-10 06:07:31

我無法理解您的評論，因爲您的代碼不會使任何元素透明。也許你的代碼不完整？ – 2014-05-15 21:51:35

將HTML元素傳遞給HTML中的元素

回答

相關問題