JSFiddle - React, Tailwind, and code Playground

HTML

<div class="day_box">
  </div>

CSS

html, body { margin: 0; }

.day_box, .upper_left_hover, .lower_right_hover, .full_day {
  background: url(http://www.madproject.com/files/corner-sprites.png);
  border: 1px solid black;
  width: 25px;
  height: 25px;
  float: left;
  margin: 100px;
}

.upper_left_hover { background-position: 75px 0; }
.lower_right_hover { background-position: 50px 0; }
.full_day { background-position: 25px 0; }

JavaScript

$(".day_box").hover(function(event){
        var offset = $(this).offset();
        var h = $(this).height() + offset.top;
        if((h - event.pageY)>(event.pageX - offset.left)) {
          console.log("Upper left");
          $(this).toggleClass("upper_left_hover");
        } else {
          console.log("Lower right");
          $(this).toggleClass("lower_right_hover");
        }
      });