单击 div [重复]
Posted
技术标签:
【中文标题】单击 div [重复]【英文标题】:Click through div [duplicate] 【发布时间】:2013-09-09 15:17:48 【问题描述】:当通知悬停时,我希望它使不透明度变为半透明,并且能够像在此通知插件 Pines Notify 中一样单击它
我尝试使用pointer-events:none
,但随后它禁用了 DOM 元素,因此 jQuery 无法处理此元素。我需要 jQuery 在悬停和悬停时执行代码。怎么办?
【问题讨论】:
【参考方案1】:要能够点击一个 div,请使用以下
-
隐藏覆盖 div
触发对被覆盖元素的点击
再次显示 div
http://jsfiddle.net/H6UEU/1/
$('#front-div').click(function (e)
$(this).hide();
$(document.elementFromPoint(e.clientX, e.clientY)).trigger("click");
$(this).show();
);
$(".tobeclicked").click(function()
$("#result").append("clicked<br />");
);
【讨论】:
【参考方案2】:结合将:hover
选择器应用于父div 和pointer-events: none
指令应用于子div。
https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
JSFiddle
html
<div class="container">
<div class="clickthrough">Mouseover</div>
<button onClick="alert('click!');">Click me</button>
</div>
CSS
.container
position: relative;
.clickthrough
position: absolute;
.container:hover .clickthrough
opacity: 0.25;
pointer-events: none;
【讨论】:
【参考方案3】:方法如下:
$(".above").click(function(e)
// Hide the element so we can reach the element below.
$(this).hide(0);
// Fetch the underlying element.
var below = $(document.elementFromPoint(e.clientX, e.clientY));
// Trigger a click on the underlying element at the earliest convenience.
setTimeout(function()
below.trigger("click");
);
// Display the element again.
$(this).show(0);
);
$(".below").click(function() alert("Below clicked!"); );
setTimeout
块使最顶层的元素在底层元素的点击事件之前重新出现。
演示:http://jsfiddle.net/t86aV/
【讨论】:
【参考方案4】:如果使用具有高 z-index 的内部 DIV 会怎样? 例如:
<style>
.sub
position: relative;
background: #99f;
width: 100px;
height: 100px;
.top
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 2;
.opacityLayer
position: absolute;
background: #fff;
width: 100px;
height: 100px;
opacity: 0.5;
left: 30px;
top: 30px;
</style>
<a href="#"><div class="sub"><div class="top"></div></div></a>
<div class="opacityLayer"></div>
【讨论】:
以上是关于单击 div [重复]的主要内容,如果未能解决你的问题,请参考以下文章
使用javascript单击div内的x按钮动态添加和删除div [重复]