javascript - カスタムカーソルコードには、Webkitの黒い四角が付属しています。私は何かが足りないのですか？

Question

私は次のコードを持っています：

<style type="text/css">
    #test-area {
        height: 200px;
        border: 3px dashed #CCCCCC;
        background: #FFFFFF;
        padding: 20px; 
        cursor: url(./blank.cur), none;
    }
    #mycursor {
        cursor: none;
        width: 97px;
        height: 137px;
        background: url("arrow.png") no-repeat left top;
        position: absolute;
        display: none;
        top: 0;
        left: 0;
        z-index: 10000;
    }
</style>
<script type="text/javascript">
    $(document).ready(function(){
       $('#test-area').mouseout(function(){
           $('#mycursor').hide();
           return false;
       });
       $('#test-area').mouseenter(function(){
           $('#mycursor').show();
           return false;
       });
        $('#test-area').mousemove(function(e){
            $('#mycursor').css('left', e.clientX - 20).css('top', e.clientY + 7);
        });
    });
</script>

次のコードはFirefoxとChrome（およびInternet Explorer？）で機能します。ただし、標準のカーソルを空のカーソルに置き換えて非表示にしたにもかかわらず、Chromeにも黒い四角が表示されます。ただし、.pngファイルは両方のブラウザに表示されます。

このクロスブラウザを最新のブラウザと互換性を持たせるにはどうすればよいですか？

Answer 1

代わりに、CSS でこれを試してください。

#test-area {
        ...
        cursor: none; /*for chrome, let me know if its not cross browser*/
    }