HTML Visual zOrder vs Mouse zOrder - html

Question

Anyone know of a way to get the zOrder to work differently for visual vs mouse events?
I have a <div> element that I am placing higher in the zOrder which is slightly transparent to highlight something but it is interfering with a :hover css style over the original element.
I either need to make the <div> invisible to the mouse or have it's mouse zOrder different from it's visual zOrder. This would be in HTML, never heard of anything that would allow this, anyone else hear anything?
I guess I'm not sure why a sample would be needed for this but it would be something like this:
<style>
#a1:hover {
background-color: red;
}
#c1 {
position: absolute;
z-index: 10;
width: 100px;
height: 100px;
opacity: 0.3;
background-color: green;
}
</style>
<div id="a1">
<span id="b1">Sample</span>
</div>
<div id="c1"> </div>
The above sample probably only serves to complicate the question, however the div#c1 is position over the rest of the elements in a higher z-order with a transparent green color.
I would like the div#a1:hover css style to still have effect when the mouse is over the a1, in the above example the div#c1 is also in the same position and so it receives the :hover effect (if there were one). I would like to have div#c1 to have a different mouse z-order such that mouse events 'pass through' it to the underlying elements (causing the a1:hover to occur)

Answer 1

[I need] to make the <div> invisible to the mouse
overlay on clickable region - CSS
How to make an element transparent to clicks but still visible?
You can use pointer-events:
none.
It works "everywhere" (Chrome,
Firefox, Safari) except Internet
Explorer (and Opera, if that matters).
http://jsfiddle.net/QC5Yw/
In the likely case that the browser support for pointer-events isn't acceptable, you'll have to use JavaScript.