如何用 CSS 实现鼠标指针变成小手图标?

分类:知识百科 日期: 点击:0

在 CSS 中,我们可以使用 cursor 属性来控制鼠标指针的外观,其中 cursor: pointer 就可以将鼠标指针变成小手图标。

我们可以通过以下代码实现:

a {
  cursor: pointer;
}

上面的代码将所有的 标签的鼠标指针都变成小手图标。

如果你想要更精确地控制鼠标指针的外观,你可以使用下面的代码:

a:hover {
  cursor: pointer;
}

上面的代码将只有当鼠标悬停在 标签上时,鼠标指针才会变成小手图标。

我们还可以使用 cursor 属性来定义其他形状的鼠标指针,如下所示:

  • cursor: auto:默认箭头形状
  • cursor: crosshair:十字线形状
  • cursor: default:箭头和文本框形状
  • cursor: move:移动形状
  • cursor: text:文本形状
  • cursor: wait:等待形状

还可以使用 url() 函数来定义自定义的鼠标指针,如下所示:

a {
  cursor: url(hand.png), pointer;
}

上面的代码将使用 hand.png 图片来定义 标签的鼠标指针样式。

在 CSS 中,我们可以使用 cursor 属性来控制鼠标指针的外观,其中 cursor: pointer 就可以将鼠标指针变成小手图标。

标签: