How to make a div click-through but hover-able?

Question

I need to make a div so that when the cursor hovers over it then I can detect it (using javascript) but I want to make it so that you can click through the div to the elements underneath. Is there a way to do this?

Thanks

@keune elements underneath are not necessarily childrens I suppose — Andrea Casaccia, Dec 27 '12 at 21:00
Your question is not clear, what did you mean by underneath, post `HTML` code here. — The Alpha, Dec 27 '12 at 21:02
Do you mean something like this: http://stackoverflow.com/questions/3680429/click-through-a-div-to-underlying-elements? — axel.michel, Dec 27 '12 at 21:03
@JanDvorak yeah I tried pointer-events: none which allowed the clickthrough but it didn't recognise the hover — Taimur, Dec 27 '12 at 21:43

Dylan Cross · Accepted Answer · 2012-12-27T21:12:29.500

0

Edit As far as I'm aware, and through my quick searches, I do not believe that you are able to do this, if you can it wouldn't be easy and or very practical I wouldn't think.

old

Using 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
    });
});

If this doesn't answer your question and do what you want, let me know what more specifically why it doesn't.

edited Dec 27 '12 at 21:12

answered Dec 27 '12 at 21:01

Dylan Cross

5,918
22
77
118

Thanks for the reply, I don't want to do anything specific when the div is clicked, I just want it to pretend as if the div located physically underneath it was clicked in the same position. – Taimur Dec 27 '12 at 21:03
Oh I understand what you mean now, when you said, "you can click through the div to the elements underneath" I took it as meaning, clicking through a series of divs. But you just want to be able to click the elements with a z-index below another div. IE a clicking below a popup of some sort. – Dylan Cross Dec 27 '12 at 21:06

score 0 · Answer 2 · answered Dec 27 '12 at 21:55

There are multiple solutions for this depending on your problem. I will start with some assumptions: 1. You are the owner of the page (you know what happens there); 2. You know what element is beneath the clicked element.

For this case check this code:

//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();

and also working example: http://jsfiddle.net/darkyndy/xRupb/

If you don't know what element is beneath it then I will try to find some code as I wrote a couple of years back something like this, as start point you can check getClientRects() function that is available on HTML elements (documentation: https://developer.mozilla.org/en-US/docs/DOM/element.getClientRects )

How to make a div click-through but hover-able?

2 Answers2