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

基本上我想把一个正方形的div对角地分成两部分，得到两个三角形

每个三角形都必须响应悬停事件

这就是我到目前为止所做的，但问题是：如果您从div的一个角直接转到另一个角，它不会重新触发悬停事件，因为该事件应用于div元素，而不是其中的define triangle区域

我愿意接受任何建议，我甚至不介意我是否需要从不同的角度来处理这个问题。至少我希望会有一个更简单的解决办法

HTML

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

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

---

小提琴：

您可以像这样使用

mousemove

事件（添加

mouseout

以在离开方块时删除这两个类）：

$（“.day\u box”）.mousemove（函数（事件）{
var offset=$（this.offset（）；
var h=$（this）.height（）+offset.top；
if（（h-event.pageY）>（event.pageX-offset.left））{
控制台日志（“左上”）；
$（此）.removeClass（“右下悬停”）；
$（this.addClass（“左上方悬停”）；
}else if（（h-event.pageY）您可以像这样使用
mousemove
事件（添加
mouseout
以在离开正方形时删除这两个类）：

$（“.day\u box”）.mousemove（函数（事件）{
var offset=$（this.offset（）；
var h=$（this）.height（）+offset.top；
if（（h-event.pageY）>（event.pageX-offset.left））{
控制台日志（“左上”）；
$（此）.removeClass（“右下悬停”）；
$（this.addClass（“左上方悬停”）；
}如果（（h-event.pageY）

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

使用直角三角形公式（），我设置了您在原始小提琴中设置的给定样式。它还在调试div中抛出一些值，以便您可以更清楚地看到它的实际操作。

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

使用直角三角形公式（），我设置了您在原始小提琴中设置的给定样式。它还会在调试div中抛出一些值，以便您可以更清楚地看到它的运行情况。
您也可以使用HTML映射区域来实现此目的：


悬停时，更改应用usemap的元素的背景。
您也可以使用HTML映射区域来实现此目的：


悬停时，更改应用usemap的元素的背景。
多亏了熵，对于本质上应该是一项足够常见的任务来说，这一切似乎都太过分了。下面是最后一段代码：嗯，我想你别无选择：逐像素跟踪移动实际上是检测移动的唯一方法从一个三角形移动到另一个三角形。
悬停
只会在您进入该区域时触发一次，就像
鼠标悬停
或
鼠标悬停
事件一样。您不能一直用这些事件处理程序检查位置。多亏了熵，对于本质上应该是一项足够常见的任务来说，这一切看起来都太过分了。下面是最后一段代码：嗯，我想你别无选择：逐像素跟踪移动实际上是检测它何时从一个三角形移动到另一个三角形的唯一方法。
悬停
只会在你进入该区域时触发一次，就像
mouseenter
或
mouseover
事件一样。你不能保持chec使用这些事件处理程序来调整位置。
  $(".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");
    }
  });

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