Question

Basically I want to split a square div diagonally in two resulting in two triangles.

Each triangle has to respond to the hover event.

This is what I have so far but the problem is: if you go from one corner of the div straight to the opposite corner it doesn’t re-trigger the hover event since the event is applied to the div element and not the define triangle area within.

I’m open to any suggestions, I don’t even mind if I need to approach the problem from a different angle all together. There’s got to be an easier solution, at least I hope!

The HTML

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

The CSS

 html, body { margin: 0; }

.day_box, .upper_left_hover, .lower_right_hover, .full_day {
  background: url(/images/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; }

The JS

  $(".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");
    }
  });

The Fiddle: http://jsfiddle.net/zsay6/

Answer 1

You can use the mousemove event like this (adding mouseout to remove both of the classes when you leave the square):

  $(".day_box").mousemove(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).removeClass("lower_right_hover");
      $(this).addClass("upper_left_hover");
    } else if ((h - event.pageY)<(event.pageX - offset.left)) {
      console.log("Lower right");
      $(this).removeClass("upper_left_hover");
      $(this).addClass("lower_right_hover");
    }
  }).mouseout(function(event)
  {
     $(this).removeClass("lower_right_hover upper_left_hover");
  });