单击div进入基础元素 [英] Click through div to underlying elements

问题描述

我有一个div和border，其中div具有background:transparent.在此div下，我还有更多元素.

I have a div that has background:transparent, along with border. Underneath this div, I have more elements.

当前，当我在叠加层div之外单击时，可以单击基础元素.但是，当直接单击叠加层div时，我无法单击基础元素.

Currently, I'm able to click the underlying elements when I click outside of the overlay div. However, I'm unable to click the underlying elements when clicking directly on the overlay div.

我希望能够单击此div，以便可以单击基础元素.

I want to be able to click through this div so that I can click on the underlying elements.

推荐答案

是的，您可以执行此操作.

Yes, you CAN do this.

使用pointer-events: none以及IE11的CSS条件语句(在IE10或更低版本中不起作用)，您可以获得针对此问题的跨浏览器兼容解决方案.

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

使用AlphaImageLoader，您甚至可以将透明的.PNG/.GIF放置在叠加层div中，并使点击流到下面的元素.

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

CSS:

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

IE11有条件:

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

这是基本示例页面包含所有代码.

这篇关于单击div进入基础元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！