Div1 covers Div2: how to check if the mouse is over the covered Div2?

Question

I'm a bit lost. I try to check if my mouse is over a Div which is covered by another Div. I search a vanilla js solution if possible.

I tried to use the elementFromPoint method, but it only seems to give me the top Div. I also tried to mess around with the "onmouseover" Event, but I didn't found a solution either. Maybe I just overlooked something.

Any ideas how to solve this? I want a method to check if my mouse is over the smaller Div2 or not. I made a jsFiddle to show the situation. I made the covering Div translucent for easier understanding from the setup.

http://jsfiddle.net/y2L5C/

  <div id="div1"></div>
    <div id="div2"></div>



   #div1 {
    width:300px;
    height:300px;
    background:red;
    position:absolute;
    top:0px;
    z-index:1;
    opacity: 0.5;
}

#div2 {
    width:200px;
    height:200px;
    background:blue;
    position:absolute;
    top:0px;
}

Answer 1

if you want to check if your mouse is over a <div> that is covered by another <div>, you can achieve this by declaring this code: pointer-events: none; to the css of the covering <div>.

For example:

<div id="under"></div>
<div id="over"></div>

Add this to your css file:

#over{ pointer-events: none; }

In that case, all pointer events for the div having the id=over will be ignored. You can now then add this code to test if its working.

Add this JavaSCript code:

$('#under').mouseover(function() {
    alert("Mouse is over the div having the id='under'");
});

Give it a try! Good luck!