jQuery mousemove handler on a masked div

Question

Here is my HTML:

<div id="one"><div id="element1"></div></div>
<div id="two">some stuff</div>

div one and two are rectangles of same width and height

This is the CSS:

#one { position: relative; width: 390px; height: 482px; }
#two { position: relative; z-index: 100; top: -482px; width: 390px; height: 482px; }

As you can see div two is positioned just over div one used as a mask

I need to do something like that:

$('#element1').mouseover(function(e){ alert('Hello') });

I did that using mousemove on div two and checking if mouse position was between x and x + width of element1 (relative to the parent div one) and same thing for y.

That solution works but has a problem when I apply -webkit-transform:rotate(45deg); to element1

I'm new and can't post an image but it's easy to understand that the area handled by the mousemove on div two doesn't correspond with the element1 div when it is rotated.

How can I know when the mouse moves above element1?

score 1 · Accepted Answer · answered Jan 26 '13 at 17:29

1

Basically your issue is that div two covers the other element, not allowing any events to be registered in the covered elements.

You can fix that by applying CSS pointer-events:none; to div two to allow events to be registered below the div.

DEMO - Using pointer-events:none; on div two

DEMO uses your exact code as posted with the following additions for visual representation and the rotation:

#one{
    border: 1px solid red;
}

#element1{
    background-color: blue;
    border: 1px solid blue;
    transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    height: 5px;
}

And the CSS change to #two:

#two { 
    position: relative; 
    pointer-events:none; 
    z-index: 100; 
    top: -482px; 
    width: 390px; 
    height: 482px; 
}

answered Jan 26 '13 at 17:29

Nope

22,147
7
47
72

I added the transform CSS as well for the other browsers so you can test the solution across them. The DEMO works in Chrome (latest), IE9 and FF (latest). The CSS for `pointer-events:none;` also works in IE8 and IE7 Browser Modes but off course rotation doesn't work there. – Nope Jan 26 '13 at 17:38
Also, this solution only addresses the issue you stated in the post but may not suite as the additional CSS prevents mouse/click events from being registered on div `two`. If you also need those events on div `two` then you might need to separate out `element1` all together and make it the top element by itself or similar. – Nope Jan 26 '13 at 17:43
pointer-events it's what i need, div two it's just a static mask with no handlers. didn't know that property. thank you dude :) – user2013861 Jan 26 '13 at 19:17

jQuery mousemove handler on a masked div

1 Answers1