如何使元素对点击透明但仍然可见?

时间:2021-07-08 18:52:25

I'm interested in putting an inset box shadow on something like an iframe. While the strategy of overlaying a div over the iframe gives the expected visual display, the div subsequently blocks clicks on the iframe itself.

我有兴趣在像iframe这样的东西上插入一个插入的阴影。虽然在iframe上覆盖div的策略给出了预期的视觉显示,但div随后会阻止对iframe本身的点击。

Sample: http://jsfiddle.net/YqXPg/

示例:http://jsfiddle.net/YqXPg/

So is there a way to pull off the inset shadow as a "framing" effect?

那么有没有办法将插入阴影作为“框架”效果?

1 个解决方案

#1


26  

Yes, there's pointer-events: none.

是的,有指针事件:无。

See: http://jsfiddle.net/YqXPg/3/

请参阅:http://jsfiddle.net/YqXPg/3/

A version that makes the overlay more obvious: http://jsfiddle.net/YqXPg/4/

使叠加更明显的版本:http://jsfiddle.net/YqXPg/4/

Note that this property doesn't work with IE, but if I remember correctly, IE will allow you to click through the transparent parts of the overlay div anyway.

请注意,此属性不适用于IE,但如果我没记错,IE将允许您无论如何都点击覆盖div的透明部分。

#1


26  

Yes, there's pointer-events: none.

是的,有指针事件:无。

See: http://jsfiddle.net/YqXPg/3/

请参阅:http://jsfiddle.net/YqXPg/3/

A version that makes the overlay more obvious: http://jsfiddle.net/YqXPg/4/

使叠加更明显的版本:http://jsfiddle.net/YqXPg/4/

Note that this property doesn't work with IE, but if I remember correctly, IE will allow you to click through the transparent parts of the overlay div anyway.

请注意,此属性不适用于IE,但如果我没记错,IE将允许您无论如何都点击覆盖div的透明部分。