調整CSS自定義鼠標光標的大小

Question

是否可以調整使用自定義圖像URL的CSS鼠標光標的大小？例如：

cursor: 'url(resources/images/custom-cursor.png), auto'; 

圖片太大了，我一直無法找到一種方式來設置圖片的URL。我知道我可以用一個新的尺寸保存圖像，但我寧願在可能的情況下在客戶端上設置尺寸。

Answer 1

檢查它，我想它是不可能的本地改變光標的大小。有一兩件事你可以做的是使用下面的代碼隱藏光標：

cursor: none; 

，並使用圖片，這是繼光標，並使用CSS風格，其width和height。這是一般的做法。

剛試過的東西：

$(function() { 
 
    $("#testarea").mousemove(function (e) { 
 
    $(".cursor").show().css({ 
 
     "left": e.clientX, 
 
     "top": e.clientY 
 
    }); 
 
    }).mouseout(function() { 
 
    $(".cursor").hide(); 
 
    }); 
 
});

#testarea { 
 
    border: 1px dashed #ccc; 
 
    height: 100px; 
 
    cursor: none; 
 
} 
 
.cursor { 
 
    position: absolute; 
 
    width: 25px; 
 
    height: 25px; 
 
    left: -100px; 
 
    cursor: none; 
 
    pointer-events: none; 
 
}

<script src="https://code.jquery.com/jquery-2.2.4.js"></script> 
 
<div id="testarea"></div> 
 
<img src="//placehold.it/200?text=Cursor" alt="Cursor" class="cursor" />