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*/
    }