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

Question

當鼠標懸停在單元格的最左側10個像素上時，我需要更改表格單元格的顏色。目前，我有這樣的：

$("#myTable table thead tr th:nth-child(3)").mouseover(function() { 
    $(this).css("background-color", "red"); 
}); 
$("#myTable table thead tr th:nth-child(3)").mouseout(function() { 
    $(this).css("background-color", "white"); 
}); 

這適用於盤旋在整個元素，但我把它懸停在最左邊的10px的它時只需要發生。

Answer 1

你可以使用mousemove代替，檢查偏移座標：

$("div").on({ 
 
    mousemove: function (e) {   
 
     var $this = $(this); 
 
     var x = e.offsetX; 
 
     
 
     // fix for firefox 
 
     if(typeof x === "undefined"){ 
 
      x = e.pageX - $this.offset().left;  
 
     }   
 
     
 
     $this.css("background-color", x <= 10 ? "red" : "white"); 
 
    }, 
 
    mouseleave: function (e) { 
 
     $(this).css("background-color", "white"); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div>test test test test</div>

Answer 2

把一個div 10px的寬左側和目標，對於鼠標懸停：

HTML

<th> 
    <div class="hover-target"></div> 
    <p>Name</p> 
</th> 

JS

$(function() { 
    $("#myTable thead tr .hover-target").mouseover(function() { 
    $(this).parent().css("background-color", "red"); 
    }); 
    $("#myTable thead tr .hover-target").mouseout(function() { 
    $(this).parent().css("background-color", "white"); 
    }); 
}); 

http://jsfiddle.net/FDRm8/