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

Question

I'm having troubles while trying to make a svg being the cursor while hovering an image. Here's the example:

<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>

So when I hover the mouse-pointer over an image, I'd like the svg arrow to appear and follow the mouse-pointer (or just replace the mouse-pointer) until I leave the image.

Answer 1

you can add cursor on hover like the code below on each of the images and I am pretty sure that the recommended format for image you want to put is png because I had a same problem for my website and I couldn't add an SVG as the cursor

 .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>