如何激活文本塊（不帶Javascript）下的元素的CSS懸停狀態？

我有一個網格元素，我有一個h1文本標籤。每個網格元素都有一個懸停動作，我想爲文本下面的網格元素激活懸停動作。但是，我不能將網格元素的z索引更高，因爲這會掩蓋文本。如何激活文本塊（不帶Javascript）下的元素的CSS懸停狀態？

的HTML的基本思想：（這裏是一個真正有用的jsfiddle鏈接：http://jsfiddle.net/evd3v/）

<div id="background" class="header"> 
</div> 
<div id="overlay"> 
    <table>...</table> <!-- A grid that covers the background image --> 
</div> 
<h1 id="title" class="title">My Page Title</h1> 
<h2 id="detail" class="title">Designed by Me</h2>

來源

2013-04-23 Rahul Gupta-Iwasaki

能否請您提供一些代碼，甚至更好[的jsfiddle ]（http://jsfiddle.net）？ – Adrift 2013-04-23 00:40:02

除非鼠標可以觸摸它，否則你不能懸停。如果文字是頂部的，則不能碰觸背後的元素，除非文本實際上是懸停元素的一部分。實際上，根據你的實際情況（顯示一些代碼會有幫助），這可能與背景圖像一起工作，只要你不需要選擇文本。但它會是很多CSS。 – jmbertucci 2013-04-23 00:50:02

可以使h3忽略鼠標（指針）事件與

h3{ pointer-events:none; }

但這只是與FF /鉻/ Webkit的工作

來源

2013-04-23 00:49:37

對於IE支持，請查看此鏈接：http://stackoverflow.com/questions/5855135/css-pointer-events-property-alternative-for-ie – 2013-04-23 00:58:02

設置網格元素background: transparent的背景，然後給他們一個更高z-index？

來源

2013-04-23 00:43:39

過渡是在網格元素的背景下，所以我無法擺脫背景。 – 2013-04-23 00:47:46

如何激活文本塊（不帶Javascript）下的元素的CSS懸停狀態？

回答

相關問題