Question

I need to know how to change the cursor image on mouse over a 100% width div depending on x values. I’m using a plugin to move the div content on mouse move and I need to change the cursor image to indicate that user interface solution. I resume : The cursor image must change to left arrow image when the mouse be over the left side of the div. The cursor must change to right image arrow when be on the right side of the div, but remember the div container is 100% width. THANKS A LOT IN ADVANCE GUYS!!!

Answer 1

Here’s a quick solution You could use different cursors but you get the picture.

http://jsfiddle.net/capo64/J4hvZ/

Edit: Here’s the jQuery just for reference

$('.MyDiv').mousemove(function(e) {
    var $this = $(this);
    var width = $this.width();
    var x = e.pageX - this.offsetLeft;

    if (x / width <= .5){
        $this.css('cursor', 'w-resize');
    } else {
        $this.css('cursor', 'e-resize');
    }
});