Is there any way to get a mouseover event when an element is covered up by another element?

Question

Without calculating the element's position and then firing your own "event".

original fiddle (can be fixed with z-index)

better fiddle (a situation where z-index can't work)

example

<div class='under'></div>
<div class='over'></div>

.over { 
  display:inline-block;
  position:absolute;
  height:100px;
  width:100px;
  background: rgba(0, 255, 0, .3);
}

.under {
  display:inline-block;
  position:absolute;
  height:26px;
  width:26px;
  top:37px;
  left:37px;
  background:rgba(0, 0, 255, 1);
}

just to be clear, do you want the green to be Y whilst hovering over the blue aswell? — Yusaf Khaliq, Jan 13 '13 at 11:02
A [hack](http://jsfiddle.net/GLCPV/1/) for the original case. Though results seem to flicker in FF, all other browsers work fine... — Teemu, Jan 13 '13 at 11:38
i added another fiddle which explains the problem a little better. i want to know when the mouse is over green WHILE i am dragging blue. — user1873073, Jan 13 '13 at 11:38

score 2 · Answer 1 · answered Jan 13 '13 at 10:48

2

I don't think it's possible, you could put a z-index in your css:

.under {
    z-index:1;
 }

and then modify your JS:

under.on("mouseover", function() { 
                            blue.html("Y"); 
                            green.html("Y"); 
 });

EDITED wrong link.

here's the Fiddle

answered Jan 13 '13 at 10:48

Ende Neu

15,581
5
57
68

thanks doesnt help for this guy, but i needed something exactly like that. very helpful. – Math chiller Sep 01 '13 at 06:09

score 2 · Accepted Answer · answered Jan 13 '13 at 10:48

2

Unless I've missed the point of your example, you can just add a z-index attribute to your CSS:

.over 
{
    display:inline-block;
    position:absolute;
    height:100px;
    width:100px;
    background: rgba(0, 255, 0, .3);
    z-index:1;
}

.under 
{
    display:inline-block;
    position:absolute;
    height:26px;
    width:26px;
    top:37px;
    left:37px;
    background:rgba(0, 0, 255, 1);
    z-index:2;
}

answered Jan 13 '13 at 10:48

Lee Taylor

7,761
16
33
49

i added a more specific example. a guy above gave this link and it looks like a pretty decent answer http://stackoverflow.com/questions/5855135/css-pointer-events-property-alternative-for-ie – user1873073 Jan 13 '13 at 11:37
i ended up calculating the coords myself. – user1873073 Jan 21 '13 at 18:12

score 2 · Answer 3 · answered Jan 13 '13 at 10:48

2

Add pointer-events:none; to your over div:

.over {
    display:inline-block;
    position:absolute;
    height:100px;
    width:100px;
    background: rgba(0, 255, 0, .3);
    pointer-events:none;
 }

DEMO: http://jsfiddle.net/ckaPU/1/

answered Jan 13 '13 at 10:48

Eli

14,779
5
59
77

@Yusaf Khaliq I just follow what OP want and this is the easiest way – Eli Jan 13 '13 at 10:53
outstanding! but no ie10 or opera – user1873073 Jan 13 '13 at 10:55
@user1873073 IE is not supported pointer-events: [http://caniuse.com/pointer-events](http://caniuse.com/pointer-events). You can try alternative way: [http://stackoverflow.com/questions/5855135/css-pointer-events-property-alternative-for-ie](http://stackoverflow.com/questions/5855135/css-pointer-events-property-alternative-for-ie) – Eli Jan 13 '13 at 11:05

Is there any way to get a mouseover event when an element is covered up by another element?

3 Answers3