HTML Visual zOrder vs Mouse zOrder

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 woul开发者_JS百科d 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">&nbsp;</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)

[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.