jquery - 将光标更改为悬停纯文本上的指针，例如

Question

我想模仿表格单元格文本中的链接，将光标更改为悬停时的指针。我知道这真的很容易。

但它并没有按照我想要的方式工作。

考虑这个CSS

.pointerCursor{cursor:pointer;}

如果我使用以下 jQuery...

$("table tbody td").hover(
    function(){$(this).addClass('pointerCursor');},
    function(){$(this).removeClass('pointerCursor');}
);

...显然，光标更改为每个整个单元格框中的指针，因此整个表格也更改为指针。

是否有一个 jQuery 选择器允许我在将鼠标悬停在单元格中仅文本时更改光标，模仿 <a>链接，以便表格的其余部分保持默认光标？

Answer 1

您需要将文本包裹在某些内容中 - 您无法直接定位文本内容。

您可以使用 jQuery 来获取文本节点，如 this answer 中所述。然后wrap()它们与您的类(class)在 span 中:

$('td').contents().filter(function() {
      return this.nodeType === 3;
}).wrap('<span class="pointerCursor" />');

td {
    width:200px;
    height:200px;
    border:1px solid #000;
}

.pointerCursor{
    cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
    <tr>
        <td>Text 1</td>
        <td>Text 2</td>
    </tr>
</table>