如何使 div 点击但可以悬停？答案

【问题标题】：How to make a div click-through but hover-able?如何使 div 点击但可以悬停？
【发布时间】：2012-12-27 20:56:15
【问题描述】：

我需要制作一个 div，以便当光标悬停在它上面时我可以检测到它（使用 javascript），但我想制作它，以便您可以通过 div 单击下面的元素。有没有办法做到这一点？

谢谢

【问题讨论】：

@keune 下面的元素我想不一定是孩子
你的问题不清楚，下面是什么意思，在这里贴HTML代码。
你的意思是这样的：stackoverflow.com/questions/3680429/…?
使用pointer-events: none 打破悬停？
@JanDvorak 是的，我尝试了 pointer-events: none 允许点击但它无法识别悬停

标签： javascript css html hover

【解决方案1】：

编辑据我所知，通过我的快速搜索，我不相信你能够做到这一点，如果可以的话，我不会认为这不容易或非常实用。

旧

使用jQuery：

$(document).ready(function(){
    $("body").on("hover", "div", function(){
         //do whatever you want on hover
    });

    $("body").on("click", "div .child-class", function(){
        //do whatever on click
    });
});

如果这不能回答您的问题并做您想做的事，请告诉我更具体的原因。

【讨论】：

感谢您的回复，我不想在单击 div 时做任何具体的事情，我只想让它假装位于其下方的 div 被单击在同一位置。
哦，我现在明白你的意思了，当你说“你可以通过 div 点击到下面的元素”时，我把它当成一个意思，点击了一系列的 div。但是您只想能够单击另一个 div 下方具有 z-index 的元素。即在某种弹出窗口下方单击。

【解决方案2】：

根据您的问题，有多种解决方案。我将从一些假设开始： 1.您是页面的所有者（您知道那里发生了什么）； 2. 你知道被点击的元素下面是什么元素。

对于这种情况，请检查以下代码：

//function executed when you click on element with id: beneath
function clickOnBeneath() {
    alert("beneath click");
}

//function executed when you click on element with id: above
function clickOnAbove() {
    var beneathEl;
    beneathEl = document.getElementById("beneath");
    beneathEl.click();
}

//attach click event on element with id: above and beneath
function attachClickOnElements() {
    var aboveEl,
        beneathEl;
    aboveEl = document.getElementById("above");
    aboveEl.addEventListener("click", clickOnAbove, false);
    beneathEl = document.getElementById("beneath");
    beneathEl.addEventListener("click", clickOnBeneath, false);
}

attachClickOnElements();

还有工作示例：http://jsfiddle.net/darkyndy/xRupb/

如果你不知道它下面是什么元素，那么我会尝试找到一些代码，因为我几年前写过类似这样的东西，作为起点，你可以检查 getClientRects() HTML 元素上可用的函数（文档：https://developer.mozilla.org/en-US/docs/DOM/element.getClientRects）

【讨论】：