正方形内の2つの三角形のクリック可能な領域

基本的に、正方形のdivを2つに斜めに分割して2つの三角形を作成したいとします。正方形内の2つの三角形のクリック可能な領域

各三角形は、ホバーイベントに応答する必要があります。

これはこれまで私が行ってきたことですが、問題は次のとおりです。divの1つのコーナーから反対側のコーナーに移動すると、イベントが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; }

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

ありがとうエントロピー、それは本質的に十分な仕事でなければならないものの上にあります。 http://jsfiddle.net/zsay6/19/ – EasyCo

まあ、私はあなたには何も変わっていないと思います。動きをピクセル単位で追跡することは、実際には、1つの三角形から移動するときを検出する唯一の方法ですもう片方に。 'hover'は' mouseenter'や 'mouseover'イベントのように、エリアに入ると一度だけトリガされます。これらのイベントハンドラで位置を確認することはできません。 – entropid