html - CSS - 光标过渡

Question

是否可以使用 CSS 过渡动画来显示光标的状态？

我试过这段代码，但它不起作用。

.test {
  cursor: default;
  width: 100px;
  height: 100px;
  background: red;
}

.test:hover {
  cursor: pointer;
  -moz-transition: cursor 500ms ease-in-out;
  -o-transition: cursor 500ms ease-in-out;
  -webkit-transition: cursor 500ms ease-in-out;
  transition: cursor 500ms ease-in-out;
}

<div class="test"></div>

Answer 1

单靠 CSS 是做不到的。 Transition 仅适用于动画属性；而 cursor 不会出现。有关动画 Prop 的完整列表，请查看 here .

请注意，您还可以为 .cursor 元素放置 .gif；请记住，在不同的浏览器上有相应的某些大小限制。