javascript - 将鼠标悬停在元素的最左侧 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

在左侧放置一个 10px 宽的 div，并将其作为鼠标悬停的目标：

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/