Clever Geek Handbook

Change the cursor to a pointer to normal hover text, for example

I want to mimic a link in the text of table cells by changing the cursor to pointer on hover. I really know what I know.

But it doesn't work the way I want.

Given this CSS

.pointerCursor {cursor: pointer;}

If I use the following jQuery ...

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

... it is obvious that the cursor changes to a pointer at every cell in the cell, and therefore the entire table.

Is there a jQuery selector that allows me to change the cursor on hover with just the text in a cell, mimicking a link <a>

so that the rest of the table remains the default cursor?

+3


source to share


2 answers


You will need to wrap the text in something - you cannot directly target text content.

You can use jQuery to get text nodes as described in this answer and then wrap()

in span

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>
Run codeHide result


+2


source


I would do it with pure CSS:

table tbody td:hover {
    cursor: pointer;
}

Please comment if you need a clean JavaScript solution



Edit: After re-reading your question, I think you are looking to change the cursor to cells that are not empty?

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


source






More articles:


All Articles