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

原创 2016年08月29日 22:43:19

在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




版权声明:本文为博主原创文章,未经博主允许不得转载。

CSS基础 a hover设置所有,鼠标移动到超链接文本处超链接变小

慈心积善融学习,技术愿为有情学。善心速造多好事,前人栽树后乘凉。我今于此写经验,愿见文者得启发。 1、代码 ...
  • yushaopu
  • yushaopu
  • 2016年09月27日 08:46
  • 1394

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

在HTML中很多情况都会要求我们当鼠标移动上去的时候显示相应的形状出来,要么是手型或者箭头这种之类的。 下面我就以超链接为例子,给大家介绍一下怎么实现这一过程。 其实特别简单只要给组件添加相应的样...
  • linzhiqiang0316
  • linzhiqiang0316
  • 2016年08月29日 22:43
  • 1763

Visio中添加、移动或删除形状上的连接点的方法

Visio中添加、移动或删除形状上的连接点的方法 利用Visio画图时,学会使用连接点能使你的画图质量和速度大幅度提高。下面在Visio2010中,以一个例子讲述如何使用连接点。 一. 准备 1...
  • GarfieldEr007
  • GarfieldEr007
  • 2016年05月26日 12:44
  • 20132

css,js实现在鼠标移动到一个位置在这个位置下面显示一个已经存在的div,这个div的位置随意

这是要显示的内容     //当鼠标移动到这个时候 移动到这 $('.explain1').hover(function(){                   ...
  • chenxi03269
  • chenxi03269
  • 2016年03月21日 17:29
  • 1762

鼠标移动到超链接上自动弹出一个层

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 演示文档 ...
  • yual365
  • yual365
  • 2011年09月22日 15:01
  • 2590

怎么设在鼠标指针放在链接上时指针不变.txt

怎么设在鼠标指针放在链接上时指针不变 a { cursor: default;  } 样式a里加上cursor: default;这句 **** 以下是 比较全的...
  • lanchengxiaoxiao
  • lanchengxiaoxiao
  • 2012年02月16日 14:33
  • 270

网页javascript精华代码集

 【1、普通的弹出窗口】 其实代码非常简单:javascript> window.open (page.html) -->   因为这是一段javascripts代码,所以它们应该放在标签和之间。是...
  • lincomin
  • lincomin
  • 2006年10月23日 10:07
  • 566

设置鼠标移动到DIV里面的内容上面 DIV标签改变背景色

  • chen__jinfei
  • chen__jinfei
  • 2010年03月20日 18:48
  • 3285

鼠标移动到div上显示子div实现要点

本例实现这样一个效果,当鼠标移动到div元素上时,显示子div,并且鼠标移到子div上子div仍然保持显示。当鼠标移出父子div时子div才又重新隐藏起来。子div显示的时候,重叠在后面其他div上,...
  • dog_in_yellow
  • dog_in_yellow
  • 2017年03月19日 14:51
  • 936

svg js给group text添加超链接&改变鼠标形状

因为项目中svg group text这一块都是js生成的,不能像在html中那样直接加上a标签完事,所以采用另外一种方法来解决js中group不能生成a标签的问题 核心代码如下: svg i...
  • u010023409
  • u010023409
  • 2017年08月17日 18:38
  • 202
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:当鼠标移动到div或者超链接只上时,显示相应的鼠标形状
举报原因:
原因补充:

(最多只允许输入30个字)