trigger js function when hover on part of div

Issue

I have js script which trigger fumction when hover in right part or left part of div but i want it to teigger the function when hover on top left qurter of div live demo

$msg = $("#msg");

$("#photoContainer").on('mousemove', function(e) {
    var mouseSide;
    if ((e.pageX - this.offsetLeft) < $(this).width() / 2) {
        mouseSide = 'L';
    } else {
        mouseSide = 'R';
    }
    $msg.text(mouseSide).css('text-align',( mouseSide=='L')?'left':'right');
}).on('mouseout', function(){
     $msg.text('');
});

Solution

Since it is your third try to get this question answered, I already posted the answer on the last question as a comment.

Demo

$msg = $("#msg");
console.clear()
$("#photoContainer").on('mousemove', function(e) {
    var mouseSide;
    const rect = e.target.getBoundingClientRect()
    const sizeOfRect = 10
    if(e.clientX >= rect.x && e.clientX <= rect.x + sizeOfRect && e.clientY >= rect.y && e.clientY <= rect.y + sizeOfRect) {
      $msg.text("TOP LEFT CORNER")
    } else {
      if ((e.pageX - this.offsetLeft) < $(this).width() / 2) {
          mouseSide = 'L';
      } else {
          mouseSide = 'R';
      }
      $msg.text(mouseSide).css('text-align',( mouseSide=='L')?'left':'right');
    }
}).on('mouseout', function(){
     $msg.text('');
});

Answered By – PRSHL

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0