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?

Answer 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; 
}