在鼠标悬停在 div 上时使用 jquery 更改光标图像答案

【问题标题】：changing cursos image with jquery on mouse over a div在鼠标悬停在 div 上时使用 jquery 更改光标图像
【发布时间】：2011-07-10 15:48:47
【问题描述】：

我需要知道如何根据 x 值在 100% 宽度的 div 上更改鼠标上的光标图像。我正在使用插件在鼠标移动时移动 div 内容，我需要更改光标图像以指示该用户界面解决方案。我继续：当鼠标在 div 的左侧时，光标图像必须变为左箭头图像。当光标位于 div 的右侧时，光标必须变为右图像箭头，但请记住 div 容器是 100% 宽度。非常感谢提前的人！！！

【问题讨论】：

标签： jquery cursor mouseover

【解决方案1】：

这是一个快速的解决方案您可以使用不同的光标，但您会得到图片。

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

编辑：这里的 jQuery 仅供参考

$('.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');
    }
});

【讨论】：

【解决方案2】：

试试这个...一旦您知道光标在哪里，您就可以更改光标图标。

var leftMin=0;
var leftMax=xxx;
var rightMin=yyy;
var rightMax=zzz;
$('div'.mousemove(function(e){

if(e.pageX> leftMin && e.pageX<leftMax){
// the user is in the left side of the panel.
}

if(e.pageX> rightMin && e.pageX<rightMax){
// the user is in the right side of the panel.
}

});

【讨论】：