单击DIV到底层元素 [英] Click through a DIV to underlying elements

问题描述

我有一个 div 有 background：transparent 以及 border 。在这个 div 下面，我有更多的元素。

目前，我可以点击底层元素单击叠加层外部 div 。但是，直接点击叠加层 div 时，我无法点击底层元素。

我想点击这个 div ，这样我可以点击底层的元素。 p>

解决方案

是的，您 CAN 可以这样做。

使用 pointer-events：none 以及IE11的CSS条件语句（在IE10或更低版本中不工作）

使用 AlphaImageLoader ，您甚至可以将透明<在 div 中的code> .PNG / .GIF ，并有点击流程到下面的元素。

CSS：

  pointer-events：none; 
 background：url（'your_transparent.png'）; 
  

IE11条件：

  filter：progid：DXImageTransform.Microsoft.AlphaImageLoader（src ='your_transparent.png'，sizingMethod ='scale'）; 
 background：none！important; 
  

以下是基本示例页与所有代码。

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

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.

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

解决方案

Yes, you CAN do this.

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.

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

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