鼠标悬停最左边和最右边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。