用jQuery将光标更改为自定义图像

Question

我正在尝试编写jQuery插件，该插件将默认光标替换为必要的图像，但mouseleave存在问题。它不会触发，因为游标总是在子div之前，并且永远不会离开它，所以游标永远不会更改回默认状态。

演示

有什么办法解决吗？

顺便说一句: jQuery，，mouseleave，的行为有点奇怪。只有当你离开你的div和所有的柴尔德迪夫时它才会触发。

演示2

我的代码：

// Plugin changing cursor before element
;
(function ($) {
    $.fn.changeCursor = function (cursorPicUrl, dx, dy) {
        function inFunction(e) {
            $cursor.show();
            return false;
        }
        function outFunction(e) {
            $cursor.hide();
            return false;
        }
        function moveFunction(e) {
            var x = e.clientX-100;
            var y = e.clientY-100;
            $cursor.css({
                "transform": "translate(" + x + "px," + y + "px)"
            });
        }
        var $cursor = $('<div id="#custom-cursor"></div>').css({
            /*cursor: none;*/
            width:      '150px',
            height:     '150px',
            background: 'url("' + cursorPicUrl + '") no-repeat left top',
            position:   'absolute',
            display:    'none',
            'z-index':  '10000'
        });

        this.append( $cursor )
            .on( "mouseenter", inFunction )
            .on( "mouseleave", outFunction )
            //.hover( inFunction, outFunction)
            .mousemove( moveFunction );
        return this;
    };

})(jQuery);

$(document).ready(function () {
    var url = 'http://placehold.it/150x150';
    $('#test-area').changeCursor( url );

});

更新

我在这里的独处：

jquery.change-cursor

Answer 1

我做了几次调整：

1. 预先将this存储在变量中。
2. 将光标div附加到主体上。
3. 将顶部/左侧属性添加到光标。

演示

Javascript:

(function ($) {
    $.fn.changeCursor = function (cursorPicUrl, dx, dy) {
        var elem = this;
        function inFunction(e) {
            $cursor.show();
            return false;
        }
        function outFunction(e) {
            $cursor.hide();
            return false;
        }
        function moveFunction(e) {
            var x = e.clientX;
            var y = e.clientY;
            $cursor.css({
                "transform": "translate(" + x + "px," + y + "px)"
            });
        }
        var $cursor = $('<div id="#custom-cursor"></div>').css({
            /*cursor: none;*/
            width:      '150px',
            height:     '150px',
            background: 'url("' + cursorPicUrl + '") no-repeat left top',
            position:   'absolute',
            top: '0',
            left: '0',
            display: 'none'
        });

        $('body').append( $cursor );
        elem.on( "mouseenter", inFunction )
          .on( "mouseleave", outFunction )
          .mousemove( moveFunction );
        return this;
    };

})(jQuery);

Answer 2

对于那些看起来还有点相似的人，可以试试这个(也许)：

$('#selector').css('cursor', 'url("/path/your_image.png"), auto');

PS:不适用于原始浏览器！