基本上我想在两个对角线上分割一个方形div，产生两个三角形。
每个三角形都必须响应悬停事件。
这就是我到目前为止的问题，但问题是：如果你从div的一个角直接到另一个角，它不会重新触发悬停事件，因为事件应用于div元素而不是定义三角形区域内。
我对任何建议持开放态度，我甚至不介意我是否需要从一个不同的角度来解决问题。 必须有一个更简单的解决方案，至少我希望如此！
HTML
<div class="day_box"> </div>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; }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"); } });小提琴： http ： //jsfiddle.net/zsay6/
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/
最满意答案
您可以像这样使用mousemove事件（当您离开方块时添加mouseout以删除两个类）：
$(".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"); });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"); });更多推荐
发布评论