Transparent area of <div> using border-radius does not trigger mouseleave?

Question

I have a mouseleave event listener on a div that is displayed as a semi-circle. The mouse leave does not fire when I move out of the circle but the pointer is still within the transparent rectangular area of the div.

The div I'm using contains SVG elements, so I do not want to go with <circle> or <svg> path solutions. I'm not looking for a workaround (as I have one already), but just wondering specifically about the <div> element.

Is there a way to get the mouse leave to trigger when outside of the visible area?

The semi-circle div css:

#circleDiv{
  display: block;  
  position: absolute;
  height: 300px; 
  width: 150px; /*half the height*/
  border-radius: 150px 0 0 150px; /* half the height e.g. x 0 0 x  */
  background-color: lavender;
}

Update: Figured it out. There was a child svg component of the div that was transparent. It exteneded beyond the bounds of the visible area of the parent div. As long as the mouse was within one of the children of the div, leave did not fire, even if the bounds of the child extend beyond the parent. I knew that entereing a child component would not fire a mouseleave, but I did not know that they prevented mouseleave even when beyond the parent bounds.

Fixed by setting the first child of the div, svg pointer-events:none , and all of the svg child components after that to pointer-events:visiblePainted

Answer 1

You can use SVG to have real circles:

 <svg width="200px" height="200px">
    <circle id="circle" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
 </svg>

And then, just normal JavaScript / jQuery:

 $('#circle').mouseleave(function() {
    alert("LEFT");
 });

Just check out this JSFiddle , I've created.

For a semi-circle you can use the path element of SVG:

Another JSFiddle

Answer 2

I'm pretty sure this is the solution you are looking for. It took me a while to wrap my head around this one, but it finally worked using pure javascript:

document.querySelector('#circleDiv').addEventListener('mouseout', function(event) {
    if (this) {
        window.alert("LEFT");
    }
}, false);

Using jQuery is the easiest route to go if your looking for simplicity. In order to really understand what's happening here, you have to understand the DOM and BOM and the way events propagate or flow within them. To start, I select the document node and use .querySelector because your trying to return the first result since it is an id css selector (there should only be 1 id selector with a given value per document). If you were looking to select multiple elements you would define a class and use .querySelectorAll with the given CSS class selector.

Next, you want to invoke the mouseout method here because it is compatible with the most browsers whereas mouseleave has limited compatibility across browsers. Although invoking the mouseout method bubbles up from the child node affecting ancestral elements, it doesn't impact the result of this specific example. After declaring this method, the browser needs directions (by defining a function) on what to do once this event takes place.

I set the condition to take place on "this" selector (#circleDiv). After the event has finished its propagation through bubbling up the DOM tree, I call the browser window to alert the user with a specified string. I hope this makes sense.