1

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/

3 Answers 3

2

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");
  });
2
  • 1
    Thanks Entropy, it just all seems so over the top for what should essentially be a common enough task. Here's the final code snippet: jsfiddle.net/zsay6/19
    – EasyCo
    Jan 27, 2012 at 2:27
  • 1
    Well, I think you don't have any alternative: following the movements pixel by pixel is actually the only way to detect when it moves from one triangle to the other one. hover is triggered just once, when you enter the area, just like mouseenter or mouseover events. You can't keep checking the position with those event handlers.
    – entropid
    Jan 27, 2012 at 2:30
2

http://jsfiddle.net/zsay6/14/

I altered your fiddle to produce the effect you wanted... and I didn't clean it up at all (was just fiddling... haha)

Using the right-triangle formula (here), I set the given style you set up in your original fiddle. It also throws up some values in a debugging div so you can see it in action a little more clearly.

0

You can also use HTML map areas for that purpose:

http://www.w3schools.com/tags/tag_map.asp

On hover, change the background of the element to which the usemap is applied.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.