鼠標懸停最左邊和最右邊10px的元素？

Question

在my previous question上擴展時，如何將div變成紅色，並且鼠標懸停在div的左側10px上時將光標變爲指針，並使div變爲綠色並將鼠標懸停在div的最右邊10px？

Answer 1

下面是基於您以前的代碼/問題的代碼的另一個答案。

http://jsfiddle.net/QL3Sj/2/

$("div").on({ 
    mousemove: function (e) {   
     var $this = $(this); 
     var x = e.offsetX; 
     var width = $(this).width(); 

     // fix for firefox 
     if(typeof x === "undefined"){ 
      x = e.pageX - $this.offset().left; 
     }   
     if (x<= 10) { 
      $this.css("background-color", "red"); 
      $this.css("cursor","pointer"); 
     } 
     else { 
      $this.css("background-color", "white"); 
      $this.css("cursor","default"); 
     } 

     if (x > (width-10)) { 
      $this.css("background-color", "green"); 
      $this.css("cursor","pointer"); 
     }  

    }, 
    mouseleave: function (e) { 
     $(this).css("background-color", "white"); 
     $this.css("cursor","default"); 
    } 
}); 

Answer 2

可以使用jQuery的mousemove處理程序，如：

$('div').mousemove(function(e){ 
     var parentOffset = $(this).parent().offset(); 
    //or $(this).offset(); if you really just want the current element's offset 
    var relX = e.pageX - parentOffset.left; 
    var relY = e.pageY - parentOffset.top; 
    if(relX <= 10) $(this).css({'background-color':'red','cursor':'pointer'}); 
    else if(relX > ($(this).width() -10)) $(this).css({'background-color':'green','cursor':'pointer'}); 
    else 
     $(this).css({'background-color':'gray','cursor':'auto'}); 
}); 

http://jsfiddle.net/kPK83/1/

相對元素定位來自this answer。