Detect if mouse is over a column border

Question

Does anybody know how can I detect if mouse is over a column border or a cell border, either by jQuery or JavaScript?

I want to implement a column resizing on a specific table.

Any help is appreciated.

Answer 1

You should check if the offsetX and offsetY are less than the border-width and if so you're in the border, also check if offsetX is greater than innerWidth or offsetY is greater than innerHeight

$('td').hover(function(e){
    var border_width = parseInt($(this).css('border-width'));
    if(e.offsetX < border_width || e.offsetX > $(this).innerWidth() || e.offsetY < border_width || e.offsetY > $(this).innerHeight()){
        console.log('This is the border');  
    }
});

Here's a jsFiddle

Answer 2

May be you can do like as follows:

1. Listen for mouse hover event on the element
2. Check the mouse position.
3. If the offset() + outerWidth() of the element is same as the mouse position, it means, you are on the border.