Question

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

但它不能按我想要的方式工作。

考虑这个CSS

.pointerCursor {光标：指针;}

如果我使用以下jQuery ......

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

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

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

Answer 1

我会通过纯CSS来做到这一点：

table tbody td:hover {
    cursor: pointer;
}

如果您需要纯JavaScript解决方案，请发表评论

编辑：重新阅读你的问题之后，我认为你正在寻找的是改变那些不空的单元格的光标？

td:hover:not(:empty) {
    cursor: pointer;
}

Answer 2

您需要将文本包装成某些内容 - 您无法直接定位文本内容。

您可以使用jQuery按照this answer中的说明获取文本节点，然后使用span $('td').contents().filter(function() { return this.nodeType === 3; }).wrap('<span class="pointerCursor" />');与您的类一起获取文本节点：

＆＃13;

td {
    width:200px;
    height:200px;
    border:1px solid #000;
}

.pointerCursor{
    cursor:pointer;
}

＆＃13;

<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>

＆＃13;

{{1}}

＆＃13;

将光标更改为指针悬停纯文本，如<a></a>

2 个答案: