如何在JS或CSS中使用svg作为鼠标光标?

Question

我在悬停图像时尝试将 svg 作为光标时遇到麻烦。 下面是示例：

<div class="main">
<div class="image1"></div>
<div class="image2"></div>
<div class="image3"></div>
<svg class="arrowWrapper" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 270.7 166.49" xml:space="preserve"><g><defs><rect id="SVGID_1_" width="270.7" height="166.49"/></defs><clipPath id="SVGID_2_"><use xlink:href="#SVGID_1_"  style="overflow:visible;"/></clipPath><path style="clip-path:url(#SVGID_2_);fill:none;stroke:#000000;stroke-width:3.401;stroke-miterlimit:10;" d="M1.2,83.67 L83.67,1.2 M1.2,82.82l82.46,82.47 M270.7,82.82H2.05"/></g>
</svg>
</div>

因此，当我将鼠标指针悬停在图像上时，我希望出现 svg 箭头并跟随鼠标指针(或只是替换鼠标指针(，直到我离开图像。

Answer 1

您可以在悬停时添加光标，就像下面的代码一样在每个图像上，我很确定您要放置的图像的推荐格式是png，因为我的网站遇到了同样的问题，我无法添加SVG作为光标

.image1 .image2 .image3:hover{
cursor: url('image path to your cursor'), auto ;
}

<div class="main">
<div class="image1"></div>
<div class="image2"></div>
<div class="image3"></div>
</div>