css cursor属性设置鼠标光标/指针的形状

原创 国哥笔记  2018-11-13 11:52  阅读 1,323 views 次

cursor属性定义及用法

在css中,cursor属性是用来设置鼠标光标/指针在指定元素上的形状。如果我们要实现当鼠标光标移动到元素上时鼠标光标的形状发生改变,我们就可以使用cursor属性来实现。

cursor属性实现的效果在实际应用中用的挺多的,比如:超链接,当鼠标经过超链接时,鼠标光标会变成一个小手,如下图所示:

css cursor属性设置鼠标光标/指针的形状

鼠标光标在文本输入框中,也会改变形状,如下图所示:

css cursor属性设置鼠标光标/指针的形状

cursor属性语法格式

css语法:cursor: default/auto/crosshair/pointer/move /e-resize/...;(例:cursor:crosshair;)
url属性值格式:cursor:url('图标路径'),其它cursor属性值;(例:cursor:url('图标路径'),auto ;)
JavaScript语法:object.style.cursor="crosshair";

cursor属性值说明

  • url:自定义光标的地址(格式:cursor: url('图标路径'),auto;);
  • default:箭头(默认光标);
  • auto:浏览器默认设置的光标;
  • crosshair:十字线光标;
  • pointer:光标呈现一只手;
  • move:光标指示某对象可被移动;
  • e-resize:光标指示矩形框的边缘可被向右移动;
  • ne-resize:光标指示矩形框的边缘可被向上及向右移动;
  • nw-resize:可被向上及向左移动;
  • n-resize:可被向上移动;
  • se-resize:可被向下及向右移动;
  • sw-resize:可被向下及向左移动;
  • s-resize:可被向下移动;
  • w-resize:可被向左移动;
  • text:光标指示文本;
  • wait:通常是一只表或沙漏(表示程序正忙);
  • help:通常是一个问号或一个气球(表示可用的帮助);

实例1(url属性值实例):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css cursor属性设置鼠标光标/指针的形状</title>
<style type="text/css">
body{background: #ddd;}div{width: 400px;height:50px;border:1px solid blueviolet;margin-top:10px;}
.a{cursor:url('https://www.ggbiji.com/wp-content/themes/Nana3.18/images/favicon.ico'),auto;}
</style>
</head>
<body>
<div class="a">cursor:url();演示:自定义光标图标。请将鼠标指针放到此处看效果</div>
</body>
</html>

运行结果:

css cursor属性设置鼠标光标/指针的形状

说明

1、url中第一个参数是自定义图标的路径,第2个参数是cursor属性的其它属性值,当第一个参数定义的图标不生效时,该属性值生效,就是一个备用;

2、IE浏览器支持cur,ani,ico这三种格式,Firefox浏览器支持bmp、gif、jpg、cur、ico这几种格式,建议使用ico或cur格式。

实例2:

除url属性值外的属性值由于语法都一样,所以实例中国只挑选了几个:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css cursor属性设置鼠标光标/指针的形状</title>
<style type="text/css">
body{background: #ddd;}div{width: 400px;height:50px;border:1px solid blueviolet;margin-top:10px;}
.a{cursor: crosshair;} .b{cursor: pointer;} .c{cursor: wait;} .d{cursor: help;}
</style>
</head>
<body>
<div class="a">cursor: crosshair;演示:十字线光标。请将鼠标指针放到此区域看效果</div>
<div class="b">cursor: pointer;演示:一只小手。请将鼠标指针放到此区域看效果</div>
<div class="c">cursor: wait;演示:一只表或沙漏。请将鼠标指针放到此区域看效果的</div>
<div class="d">cursor: help;演示:问号或一个气球。请将鼠标指针放到此区域看效果</div>
</body>
</html>

运行结果:

css cursor属性设置鼠标光标/指针的形状

 

更多css属性请移步到——>css属性大全

本文地址:https://www.ggbiji.com/css-cursor.html
版权声明:本文为 国哥笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情