当鼠标移动到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鼠标滑过、按下链接的样式

伪类和伪对象:CSS规定伪类和伪对象以冒号开始;如同时使用四个样式位置不能出错,否则浏览器无法识别。链接默认样式,链接已访问过样式,鼠标滑过链接样式和按下链接样式如下: a{ /*相同的样式都放在...

如何在html中调用js

一、JavaScript脚本语言的特性 JavaScript脚本语言是一种面向浏览器的网页脚本编程语言。脚本语言有以下几个特性: 1、在客户端执行。完全在用户的计算机上运行,无须经过服务器。 2...

HTML之图像、超链接、表格、表单

图像图像元素 元素将图像添加到页面,属于单标签 必须属性:src 常用属性:width、height 绝对路径和相对路径绝对路径 从盘符开始写出图片的完整的路径 如 D:/images/1....

(源码实例)通过层DIV实现,当鼠标放在链接上面,显示图片及文字

(源码实例)通过层DIV实现,当鼠标放在链接上面,显示图片及文字 层的位置是可改变、大小是可改变的、可见是可调的,这个就可以用于实现一些特殊的效果,如隐显、渐显等, 下面是一个鼠标事件的层操作,当...

jsp中,当鼠标移动到图片上时,显示该图片的大图

emu 原图: 局部放大图: zoomImg.src = srcImg.src; srcImg.height = srcImg.height/2; var z...
  • iastro
  • iastro
  • 2014年10月30日 16:37
  • 2295

C#中,当鼠标移动到控件上,动态显示提示内容 -> 用代码操作ToolTip

【背景】 写了个C#的小程序,其中在Settings窗体中有些配置参数,希望在鼠标移动到对应的配置选项上,动态显示相关的说明解释内容。 【解决过程】 1.原先就已经知道,有些控件,是带ToolT...

js 当鼠标移动到表格一行上时,该行背景颜色改变

1. js,当鼠标移动到表格一行上时,该行背景颜色改变 var rows=document.getElementsByTagName('tr') for(var i=0;i...

VC/MFC 当鼠标移到控件上时显示提示信息

VC/MFC 当鼠标移到控件上时显示提示信息 ToolTip是Win32中一个通用控件,MFC中为其生成了一个类CToolTipCtrl,总的说来其使用方法是较简单的,下面讲一下它的一般用法和高级用...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:当鼠标移动到div或者超链接只上时,显示相应的鼠标形状
举报原因:
原因补充:

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