My goal is to divide a square-shaped div diagonally, creating two triangles. Each triangle should respond to the hover event.
However, I have encountered a problem where if you move from one corner of the div directly to the opposite corner, the hover event doesn't re-trigger because it is applied to the entire div element rather than specific triangle areas.
I am open to any suggestions and willing to explore different approaches to solve this issue. Hopefully, there is a simpler solution out there!
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/