1

I have a grid of elements over which I have an h1 text tag. Each of the grid elements has a hover action, and I would like to activate that hover action for the grid elements below the text. However, I cannot put the z-index of the grid elements higher, as that would obscure the text.

A basic idea of the html: (and here's an actually useful JSFiddle link: 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>
Rahul Gupta-Iwasaki
  • 1,683
  • 2
  • 21
  • 39
  • 3
    Can you please provide some code or even better a [jsFiddle](http://jsfiddle.net)? – Adrift Apr 23 '13 at 00:40
  • You can't hover something unless your mouse can touch it. If there's text over-top, you can't touch the element behind... unless the text was somehow actually a part of hover elements. Actually, depending on your actual situation (showing some code would help), this might work with a background image, as long so you don't need to select the text. But it would be a lot of CSS. – jmbertucci Apr 23 '13 at 00:50

2 Answers2

5

You can make the h3 ignore mouse (pointer) events with

h3{ pointer-events:none; }

but this only works with FF/Chrome/Webkit

Gabriele Petrioli
  • 191,379
  • 34
  • 261
  • 317
  • 2
    For IE support, check this link: http://stackoverflow.com/questions/5855135/css-pointer-events-property-alternative-for-ie – Lior Elrom Apr 23 '13 at 00:58
0

Set the background of the grid elements to background: transparent and then give them a higher z-index?

Mathijs Flietstra
  • 12,900
  • 3
  • 38
  • 67