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

Here's a quick and dirty solution. I'll leave it up to you to optimize it. Here's the fiddle: http://jsfiddle.net/y2L5C/1/

var div2 = $("#div2"),
    width = div2.outerWidth(true),
    height = div2.outerHeight(true),
    offset = div2.offset(),
    top = offset.top,
    left = offset.left;

$(document).mousemove(function(evt) {
    if(evt.pageX <= (left + width) && evt.pageX >= left &&
       evt.pageY <= (top + height) && evt.pageY >= top) {
        $("#indicator").text("Over the div #2");
    } else {
        $("#indicator").text("NOT over the div #2");
    }
});

Answer 2

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!

Answer 3

Interesting concept. I do want to bring up that for plain CSS events there are plain CSS solutions such as here . However, if what you are looking to do is initiate Javascript events then the trouble is that onMouseOver is not going to trigger for #div1 if #div2 is on top of it.

One potential, very simple solution, is to create a script to copy the position of your #div2 element and change the style to be a higher z-index. While JQuery might be "easier" to create this, you could certainly create a vanilla JS solution. This script may give you a little guidance as to how you can find positioning. You can use element.style values in order to assign CSS values. If your element positions are declared by CSS then you can do something like this:

var div1 = getElementById('div1');
var div2 = getElementById('div2');
var newElem = document.createElement('div');
newElem.id = 'div2makefacade';

Now you can either utilize newElem.style.top etc. and assign div2.style.top 's value, or you can even assign a custom class which has the correct position values. When you initiate onMouseOver, you can do so on #div2makefacade rather than #div2 , and perform actions on #div2

Answer 4

well i made a function that perhaps it help you in some way, first in your view you have to load jquery librarie like this

<script type="text/javascript" src="Scripts/jquery-1.6.2.js"></script>

and your css you have this

.visiblepanel{
  display: none;   
}

.visiblepanela{
  display: none;   
}

your script this, you have to add the hover function

$('#quickstart').hover(function() {
    $('#visiblepanel').toggle(); 
});

$('#quickstarta').hover(function() {
    $('#visiblepanela').toggle(); 
});

and your html body

<div id="quickstart">Div 1</div>

<div id="quickstarta">Div 2</div>

<div id="visiblepanel" class="visiblepanel">mouse encima div 1</div>

<div id="visiblepanela" class="visiblepanel">mouse encima div 2</div>

so it consist that when the mouse is over the DIV 1 it will show an advice that your mouse is there, and so on with DIV 2...i hope i could helped you...