Change cursor to pointer on hover plain text like <a>

Question

I want to imitate a link in the text of the table cells, changing the cursor to pointer on hover. Is really easy, I know.

But it does not work the way I want.

Considering this CSS

.pointerCursor{cursor:pointer;}

If I use the following jQuery...

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

...obviously the cursor is changed to the pointer in each entire cell box and therefore, the entire table.

Is there a jQuery selector that allows me to change the cursor when hover only the text in a cell, imitating an <a> link, so that the rest of the table remains the default cursor?

Answer 1

You will need to wrap the text in something - you can't target text content directly.

You can use jQuery to get the text nodes as described in this answer and then wrap() them in spans with your class:

$('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>

Answer 2

I would do this via pure CSS:

table tbody td:hover {
    cursor: pointer;
}

Please comment if you need a pure JavaScript solution

Edit: After re-reading your question, I think what you're looking for is changing the cursor on cells that aren't empty?

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