自定义光标代码在webkit中带有一个黑色方块.我错过什么了吗?

Custom Cursor code comes with a black square in webkit. Am I missing something?

本文关键字：错过 方块 什么 黑色 有一个 代码 光标 webkit 自定义      更新时间：2023-09-26

我有以下代码:

<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文件在两个浏览器中都显示。

我如何使这个跨浏览器兼容现代浏览器?

你应该在你的CSS中试试这个:

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