html - 将鼠标悬停在 h1 上时，箭头光标变为垂直条

Question

我有一个简单的代码

<h1>Hello</h1>

当我在 Firefox 浏览器中打开这个 .html 文件时，当我将光标悬停在 Hello 上时, 光标从箭头变为垂直条。为什么会这样？这是因为 Firefox 的默认样式表吗？

Answer 1

默认所有文本标签为“竖条”，这意味着您可以选择文本并复制它。
如果您想更改悬停效果上的光标，请使用带有选项 cursor 的 css .
cursors documentation和 about custom cursors

html {
  background: hsl(0, 2%, 11%);
  background-image: url(https://www.iconsdb.com/icons/preview/guacamole-green/cursor-3-xxl.png);
}
h1 {
margin-top: 50px;
  display: inline;
  padding: 10px;
  color: grey;
}
#auto {
  cursor: auto;
}
#pointer {
  cursor: pointer;
}
#default {
  cursor: default;
}
#you-own-cursor {
  cursor: url("data:image/svg+xml,%3Csvg width='18' height='20' viewBox='0 0 18 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 2.32471L16.5 18.1737' stroke='%23F986A1' stroke-width='3' stroke-linecap='round' stroke-linejoin='bevel'/%3E%3Cpath d='M16.5 2.32471L1.50005 18.1737' stroke='%23F986A1' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") 5 5, pointer;
}

<h1 id="auto">Hello</h1>
<h1 id="pointer">Hello</h1>
<h1 id="default">Hello</h1>
<h1 id="you-own-cursor">Hello</h1>