Kweldulf Kweldulf - 1 year ago 87
CSS Question

.mouseleave() activate only when moving out of specific border

I'm trying to create a rollup div while mouse is over another div. It opens but I'd like it not to close when leaving through the bottom border. Is it possible using JS or JQuery. Here is my current code:


Answer Source

When processing the mouseleave, you can get the dimensions of the element and see whether the event's pageY is below the element:

$("#rollup1").mouseenter(function() {
  $("#status").text("Over the element...");
$("#rollup1").mouseleave(function(e) {
  var $this = $(this);
  var bottom = $this.offset().top + $this.height();
  if (bottom < e.pageY) {
    $("#status").text("Left via bottom edge");
  } else {
    $("#status").text("Left NOT via bottom edge");
#rollup1 {
  width: 50px;
  height: 50px;
  border: 1px solid black;
<div id="status">&nbsp;</div>
<div id="rollup1"></div>
<script src=""></script>