一个正方形内有两个三角形可点击区域 [英] Two triangular clickable area within a square

问题描述

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

这是我到目前为止，但问题是：如果你从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/

解决方案

您可以使用 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 -  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）; 
}）; 
  

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/

解决方案

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

这篇关于一个正方形内有两个三角形可点击区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！