📌  相关文章
📜  当用户使用 CSS 将鼠标悬停在列表项上时,如何使光标移动?(1)

📅  最后修改于: 2023-12-03 15:09:51.546000             🧑  作者: Mango

如何使用 CSS 让鼠标悬停在列表项上时光标移动?

在 CSS 中,可以使用 :hover 伪类来选择元素在鼠标悬停时的样式。要让光标移动,可以使用 cursor 属性来设置光标的样式。

具体代码如下:

/* 设置列表项的默认样式 */
li {
  /* 其它样式 */
  cursor: default;
}

/* 悬停时改变样式 */
li:hover {
  cursor: move;
}

可以看到,我们首先将列表项的 cursor 属性设置为 default,表示默认光标样式。然后在 li:hover 伪类中,将 cursor 属性设置为 move,表示鼠标悬停时光标为移动状态。

在此基础上,你还可以使用其它 CSS 属性来进一步改变鼠标悬停时的样式,例如改变背景颜色等。