我根据图像位置做了自定义css光标图像更改。 它适用于Firefox和Chrome,但不适用于Safari。
Safari仅显示第一个状态(光标图像。)如何使开关与Safari配合使用?
$('body').on('mousemove', '.content img', function(e) {
e.preventDefault();
var x = e.pageX - $(this).offset().left;
if (x > $(this).width() / 2) {
console.log("right");
$('.content img').css({
"cursor": "url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20%20width%3D%2216.899px%22%20height%3D%2215.799px%22%20viewBox%3D%220%200%2016.899%2015.799%22%20enable-background%3D%22new%200%200%2016.899%2015.799%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E.weiss%20%7Bfill%3A%23ffffff%3B%7D%20%3C%2Fstyle%3E%3Cg%3E%20%3Cg%3E%20%20%3Crect%20class%3D%22weiss%22%20x%3D%220%22%20y%3D%226.4%22%20width%3D%2215%22%20height%3D%222.999%22%2F%3E%20%3C%2Fg%3E%20%3Cpolygon%20class%3D%22weiss%22%20points%3D%229%2C0%207%2C2%2012.899%2C7.9%207%2C13.799%209%2C15.799%2016.899%2C7.9%20%20%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E') 8 8,auto"
});
} else {
console.log("left");
$('.content img').css({
"cursor": "url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20%20width%3D%2216.899px%22%20height%3D%2215.799px%22%20viewBox%3D%220%200%2016.899%2015.799%22%20enable-background%3D%22new%200%200%2016.899%2015.799%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E.weiss%20%7Bfill%3A%23ffffff%3B%7D%20%3C%2Fstyle%3E%3Cg%3E%20%3Cg%3E%20%20%3Crect%20class%3D%22weiss%22%20x%3D%222%22%20y%3D%226.4%22%20width%3D%2215%22%20height%3D%222.999%22%2F%3E%20%3C%2Fg%3E%20%3Cpolygon%20class%3D%22weiss%22%20points%3D%227.899%2C15.799%209.899%2C13.799%204%2C7.898%209.899%2C2%207.899%2C0%200%2C7.898%20%20%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E') 8 8,auto"
});
}
});