CODEWITHSUNDEEP
html-tablecursor
Dave33
Dave33

Reputation: 471

Change cursor to pointer on hover right side of td

I have a table with td's. I would like it so that the user sees the cursor change into a pointer when he/she reaches the right border of the specific td, and revert back to the normal pointer when the user is not hovering the right border.

Googled a lot but I cannot seem to find an answer. There's hope someone here can help me...?

I would like it to be pure CSS, but maybe there is need for some query too?

Upvotes: 1

Views: 2593

Answers (1)

varnit
varnit

Reputation: 1897

you can use CSS to modify the behavior of the type of cursor in your case you can use 

your_td_tag:hover { 
    cursor:progress
}

If you specifically want to select border only you have to use some javascript hacky stuff 

$('div').click(function(e){
    if(  e.offsetX <= parseInt($(this).css('borderLeftWidth'))){
       $("div").css("cursor:progress");
    }
});

here div can be replaced by any tag and cursor-progress can be replaced by your desired cursor.

there are various types of cursors available by default auto crosshair default e-resize grab help move n-resize ne-resize nw-resize pointer progress s-resize se-resize sw-resize text w-resize wait not-allowed no-drop

you can also use your custom cursor as follows

your_td_tag_selector:hover{
cursor: url('some-cursor.ico'), default;
}

the default here is used as a fallback mechanism so if some-cursor.ico is not supported or not available it will fall back to default cursor.

let me know if it solves your problem..

Upvotes: 1

Related Questions