CSS div 鼠标样式

在本文中，我们将介绍如何使用CSS来改变div元素鼠标悬停时的样式。在默认情况下，当鼠标悬停在div元素上时，鼠标会变成一个小手，这是浏览器默认样式。但是，如果我们想在鼠标悬停时使用自定义样式，该怎么做呢？

阅读更多：CSS 教程

使用CSS的cursor属性

CSS的cursor属性可以更改鼠标样式。它有许多内置的选项，例如“pointer”、“text”、“move”等。我们也可以使用自定义的鼠标样式，只需要在CSS文件中设置相应的样式，然后使用URL作为属性值。

例如，我们想要在鼠标悬停时将div元素变成一个红色的十字架，只需要在CSS文件中这样设置：

div:hover {
  cursor: url('crosshair.png') 12 12, crosshair;
}

这里的“crosshair.png”是自定义鼠标样式的图片，12 12是指图片的坐标，crosshair是指如果图片无法加载，鼠标会变成默认的“十字架”样式。

使用CSS3的自定义鼠标样式

除了使用CSS的cursor属性之外，我们也可以使用CSS3的自定义鼠标样式。这需要我们在CSS文件中使用@cursor规则。

例如，我们想要在鼠标悬停时将div元素变成一个红色的心形，只需要在CSS文件中这样设置：

@cursor heart {
  cursor: url('heart.png') 12 12, auto;
}
div:hover {
  cursor: heart;
}

这里的“@cursor heart”表示我们要定义一个名为“heart”的自定义鼠标样式，“heart.png”是自定义鼠标样式的图片，12 12是指图片的坐标，auto是指如果图片无法加载，鼠标会变成默认样式。同时，我们需要在div:hover中使用定义的自定义鼠标样式。

简单的样式示例

下面是一些简单的示例，可以帮助您更好地理解如何使用CSS来改变div元素鼠标样式。

使用CSS的cursor属性将鼠标更改为指针：

div:hover {
  cursor: pointer;
}

使用CSS的cursor属性将鼠标更改为文本：

div:hover {
  cursor: text;
}

使用CSS的cursor属性将鼠标更改为移动：

div:hover {
  cursor: move;
}

总结

使用CSS来改变div元素鼠标悬停时的样式非常简单，只需要了解cursor属性和@cursor规则即可。同时，我们还可以通过自定义鼠标样式来使用更多的样式方案。希望这篇文章对您有所帮助，谢谢阅读！