如何通过css在追格主题/酱茄主题中使用自定义光标

在追格主题和酱茄主题中，如果你想针对某个特定区域，应用不同的鼠标悬停样式，可以通过css的cursor 属性来实现，要说明的是，它可以让你展示图片，这相当于以照片的格式显示提示信息。

你可以在特定的 div 元素中锁定特定的光标，当鼠标进入该div区域后差异显示，所以在此 div外，则按通用进行显示。

具体实现方式，这里给大家一个简单代码可以进行测试

HTML部分：

<div class="custom-cursor">
  <div class="box">
    默认
  </div>
  
  <div class="box emoji-cursor">
    SVG表情图标
  </div>

  <div class="box image-cursor">
    图片
  </div>

</div>

CSS部分

主要是通过.image-cursor和.emoji-cursor来实现差异，实际应用中，大家可以根据自己需求对图片，图标进行变更，尺寸调整

.custom-cursor {
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  padding: 0 10px;
 
}

.box {
    width: 240px;
    height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #759edd;
    margin-right: 10px;color: #fff;
    font-size: 1.4em;
    text-align: center;
    border-radius: 12px;
  }

.image-cursor {
  background-color: #da4b4b;
  cursor: url("https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0ac1d8cb2b1b46a384e986a7461df26a~tplv-k3u1fbpfcp-watermark.image?"), auto;
}

.emoji-cursor {
  background-color: #239154;
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='48' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>🚀</text></svg>"), auto;
}