Draw borders over elements, but don't capture events

Question

Is it possible to both:

• drawing something over other elements in HTML
• do not capture mouse events (click, hover)

In IE8 (Actually, IE9@IE8 mode)? Maybe, VML or some tricky behavior.

In other browsers I can use box-shadow, but both DropShadow and Blur filters for IE capture events. Is there any option?

I know, I could capture events and re-fire them, but there're still problems with mouseover/mouseout.

Answer 1

See this answer: https://stackoverflow.com/a/11115375/638544

Short version: In IE, elements with a background color of transparent and a gradient applied do not receive mouse events. So add this to your CSS:

.ie #overlay {
    background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#000000,endColorstr=#000000)"; /* IE8 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#000000,endColorstr=#000000);   /* IE6 & 7 */
    zoom: 1;
}

(Of course, you can use another method of targeting IE with the background declaration, and you can change the color strings to whatever values you like.)