Clickable divs beneath transparent div

Question

Is it possible to have a absolute-positioned, transparent div overlaying a series of divs that are clickable? I want to be able to hover over the red divs underneath in order to get a response.

<style type="text/css">

#holder{
    width:200px;
    height:200px;
}
.clickMe {
    width:100px;
    height:100px;
    cursor:pointer;
    background-color:red;
    border:1px solid black;
    float:left;
    margin:-1px;
    padding:0;
}
.hidey {
    position:absolute;
    top:0;
    left:0;
    z-index:50;
    height:50%;
    width:50%;
    opacity:.25;
    background-color:black;
}
</style>
<div class="hidey"></div>
<div id="holder">
    <div class="clickMe"></div>
    <div class="clickMe"></div>
    <div class="clickMe"></div>
    <div class="clickMe"></div>
</div>

Answer 1

Pointer-events can solve your problem. Pointer-events are supported in Firefox 3.6+, Safari 4 and Google Chrome so far (see compatibility table ).

Answer 2

Because the top div will consume the mouse action the only way to do what you want (of which I'm aware) is to make the top div take an onClick action, then make a javascript function to pass that click to the divs underneath.

See this answer for details:

Trigger a button click with JavaScript on the Enter key in a text box

Your function will be a bit more involved, as you'll need to get the mouse position as well and use that to decide which box you're clicking.

See the second answer here for how to do that.

How do I get the absolute position of a mouse click from an onClick event on the body?

EDIT: SORRY, you said hover, not click. Make that onHover action, and pass a hover action, instead of a click. Same general idea though.

Answer 3

Let me suggest the simple old school method rather than going to any length to make this work.

Rather than the current structure of having a single wrapper around the inner elements, just give the individual elements a wrapper and put the event on those wrappers to find the child element.

IE rather than this:

<div class="wrapper">
    <div class="clickMe">
        ...
    </div>
    <div class="clickMe">
        ...
    </div>
</div>

Use this:

<div class="wrapper">
    <div class="clickMe">
        ...
    </div>
</div>
<div class="wrapper">
    <div class="clickMe">
        ...
    </div>
</div>

You'll have some extra markup in your HTML, but in my opinion, this could be preferable to the lengths you will need to go to make the current markup work. Just because new tech exists, doesn't mean it's the best tool for the job.