Click through div to underlying elements(单击 div 到底层元素)
问题描述
我有一个 div
,它具有 background:transparent
以及 border
.在这个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.
推荐答案
是的,你可以这样做.
使用 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/.GIF
s 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;
这是一个基本示例页面包含所有代码.
Here is a basic example page with all the code.
这篇关于单击 div 到底层元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:单击 div 到底层元素
基础教程推荐
- 当用户滚动离开时如何暂停 youtube 嵌入 2022-01-01
- 我什么时候应该在导入时使用方括号 2022-01-01
- 角度Apollo设置WatchQuery结果为可用变量 2022-01-01
- 有没有办法使用OpenLayers更改OpenStreetMap中某些要素 2022-09-06
- Karma-Jasmine:如何正确监视 Modal? 2022-01-01
- 响应更改 div 大小保持纵横比 2022-01-01
- 在 JS 中获取客户端时区(不是 GMT 偏移量) 2022-01-01
- 动态更新多个选择框 2022-01-01
- 在for循环中使用setTimeout 2022-01-01
- 悬停时滑动输入并停留几秒钟 2022-01-01