使重叠的 div“不可点击”，以便下面的内容可以访问？

我使用一个 JPG 覆盖与一个效果降低不透明度，但我想它只作为一个效果，并使下面的内容 div 可点击。这可能吗，谢谢:))

谢谢大家的评论。我想我得另想办法了，因为 JPEG 图片覆盖了整个页面:)

99208 次浏览
小开

No, it's not. The overlaying element will always intercept the click. One possible workaround is to bind a click event to the overlaying element, and then get the current mouse position & compare that to the position of the element underneath in order to determine whether or not that element should register a click. But chances are there is a much better way of accomplishing this. Without seeing your code, however, I have no way of knowing.

小开
最佳答案

Well there is pointer-events:none; but only few browsers modern browsers (and IE11) support it.

https://developer.mozilla.org/en/CSS/pointer-events

小开

Yes, its possible

Use pointer-events: none along with conditional statements of CSS for IE11 (as it does not work in IE10 or below), you can get a cross browser compatible solution to achieve this.

Using AlphaImageLoader, you can even put transparent .PNG/.GIFs in the overlay div and have clicks propagate through to elements lying bellow.

CSS:

pointer-events: none;
background: url('your_transparent.png');

IE11 conditional:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your_transparent.png', sizingMethod='scale');
background: none !important;

Here is a basic example page with all the code.

小开

one simple trick i have found, althoug not very w3c, is to encapsulate the div into a span and use that span class to make the overlay. That way the whole thing will be clickable , and the div will behave like a div


提交答案