单击 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 [重复]

单击 div 之外的任何位置时隐藏 div [重复]

根据单选按钮单击显示和隐藏 div [重复]

如何将用户重定向到 div 上的新页面单击 JQuery [重复]

单击向上或向下按钮时滚动div内容[重复]

每次单击按钮时随机颜色[重复]