正方形内的两个三角形可点击区域

基本上我想在两个对角线上分割一个方形div，产生两个三角形。

每个三角形都必须响应hover事件。

这就是我到目前为止的问题，但问题是：如果你从div的一个角直接到另一个角，它不会重新触发hover事件，因为事件应用于div元素而不是定义三角形区域内。

我对任何建议持开放态度，我甚至不介意我是否需要从一个不同的角度来解决问题。 必须有一个更简单的解决方案，至少我希望如此！

HTML

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/

Answer 1

您可以像这样使用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"); }); 

Answer 2

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

我改变你的小提琴以产生你想要的效果……我根本没有清理它（只是摆弄……哈哈）

使用右三角形公式（ 此处 ），我设置您在原始小提琴中设置的给定样式。 它还会在调试div中抛出一些值，这样您就可以更清楚地看到它的运行情况。

Answer 3

您还可以使用HTML地图区域来实现此目的：

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

在hover时，更改应用了usemap的元素的背景。