如何激活文本块下方元素的 CSS 悬停状态（无需 Javascript）？

Question

我有一个元素网格，上面有一个 h1 文本标签。每个网格元素都有一个悬停操作，我想为文本下方的网格元素激活该悬停操作。但是，我不能将网格元素的 z 索引设置得更高，因为这会使文本变得模糊。

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>

Answer 1

您可以使用以下命令h3忽略鼠标（指针）事件

h3{ pointer-events:none; }

但这仅适用于 FF/Chrome/Webkit