Question

基本上我想将一个方形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/

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/

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

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

Answer 3

您还可以将HTML地图区域用于此目的：

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

悬停时，更改应用了usemap的元素的背景。

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

3 个答案: