当鼠标移动到div或者超链接只上时，显示相应的鼠标形状

最新推荐文章于 2024-08-05 07:00:00 发布

林老师带你学编程

最新推荐文章于 2024-08-05 07:00:00 发布

阅读量1w

点赞数 4

本文链接：https://blog.csdn.net/linzhiqiang0316/article/details/52357136

版权

在HTML中很多情况都会要求我们当鼠标移动上去的时候显示相应的形状出来，要么是手型或者箭头这种之类的。

下面我就以超链接为例子，给大家介绍一下怎么实现这一过程。

其实特别简单只要给组件添加相应的样式就可以实现这样的效果了。这种样式叫做cursor属性

下面给出例子代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<a href="#" style="cursor:hand">CSS鼠标手型效果</a><br><br>
<a href="#" style="cursor:pointer">CSS鼠标手型效果</a><br><br>
<a href="#" style="cursor:crosshair">CSS鼠标十字型效果</a><br><br>
<a href="#"style="cursor:help">CSS鼠标问号效果</a><br><br>
<a href="#"style="cursor:text">是移动到文本上的那种效果</a><br><br>
<a href="#" style="cursor:wait">是等待的那种效果</a><br><br>
<a href="#" style="cursor:default">是默认效果</a><br><br>
<a href="#" style="cursor:e-resize">是向右的箭头</a><br><br>
<a href="#"style="cursor:ne-resize">是向右上的箭头</a><br><br>
<a href="#"style="cursor:n-resize">是向上的箭头</a><br><br>
<a href="#"style="cursor:nw-resize">是向左上的箭头</a><br><br>
<a href="#"style="cursor:w-resize">是向左的箭头</a><br><br>
<a href="#" style="cursor:sw-resize">是左下的箭头</a><br><br>
<a href="#" style="cursor:s-resize">是向下的箭头</a><br><br>
<a href="#" style="cursor:se-resize">是向右下的箭头</a><br><br>
<a href="#"style="cursor:auto">是由系统自动给出效果</a><br><br>
</body>
</html>

运行的效果大家可以自己去试一下，非常简单。

这里需要注意的是：style=“cursor：hand”这个样式只要加在相应的组件上面就可以实现相应的鼠标形状功能了。

例如：放在div上面就可以这么写：<div style="cursor:hand"></div>这样就可以实现鼠标移动到div上面的时候出现手型了。

还有几点需要注意的是：

一：style=“cursor：hand”，style=“cursor：pointer”这两个虽然都是手型，可以style=“cursor：pointer”的兼容性比style=“cursor：hand”要好，所以如果要使用手型的话推荐大家使用style=“cursor：pointer”这种方式来实现。

二：style=“cursor：auto”这个样式的形状和浏览器有关系，Google，火狐，IE可能出来的形状都不大一样。

三：那些带有上下箭头的形状，经过本人测试其实都一样，因为是双向箭头，所以没有箭头朝向的区别。但是这也有可能是浏览器的缘故，因为我只测试过Google，火狐，IE这三个浏览器。

如博客内容有问题或有疑义，请及时提出，不甚感谢。本人QQ：208017534