正方形內的兩個三角形可點擊區域

基本上我想在兩個對角線上分割一個正方形，產生兩個三角形。正方形內的兩個三角形可點擊區域

每個三角形都必須響應懸停事件。

這是我到目前爲止，但問題是：如果你從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/

來源

2012-01-27 EasyCo

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

來源

2012-01-27 02:16:37 entropid

感謝Entropy，它只是看起來如此重要，以至於本質上應該是一項普遍的任務。下面是最終的代碼片段：http://jsfiddle.net/zsay6/19/ – EasyCo 2012-01-27 02:27:05

嗯，我認爲你沒有任何其他的選擇：跟着像素移動像素實際上是檢測它從一個三角形移動的唯一方法到另一個。當鼠標進入該區域時，只會觸發一次「懸停」，就像'mouseenter'或'mouseover'事件一樣。您無法繼續使用這些事件處理程序檢查位置。 – entropid 2012-01-27 02:30:36