css鼠标样式设置_css手型鼠标样式

发布时间:2020-10-30编辑:脚本学堂
有关css鼠标样式设置的方法,修改鼠标样式的css代码,十五种CSS鼠标样式,需要的朋友参考下。

一,css鼠标样式如何设置?

任意标签中插入 style="cursor:*" 

例子:
<span style="cursor:*">文本或其它页面元素</span>  <a href="#" style="cursor:*">文本或其它页面元素</a> 
注意把 * 换成如下15个效果的一种:

hand是手型 cursor:hand

例子:
css鼠标手型效果
 

<a href="#" style="cursor:hand">css鼠标手型效果</a>
pointer也是手型 cursor:pointer,这里推荐使用这种,因为这可以在多种浏览器下使用。

例子:
css鼠标手型效果
 

<a href="#" style="cursor:pointer">css鼠标手型效果</a>
crosshair是十字型 cursor:crosshair

例子:
css鼠标十字型效果
 

<a href="#" style="cursor:crosshair">css鼠标十字型 效果</a>
help是问号cursor:help

例子:
css鼠标问号效果
 

<a href="#" style="cursor:help">css鼠标问号效果</a>

其它:
 

复制代码 代码示例:
text是移动到文本上的那种效果
wait是等待的那种效果
default是默认效果
e-resize是向右的箭头
ne-resize是向右上的箭头
n-resize是向上的箭头
nw-resize是向左上的箭头
w-resize是向左的箭头
sw-resize是左下的箭头
s-resize是向下的箭头
se-resize是向右下的箭头
auto是由系统自动给出效果

二,修改鼠标样式的css代码

鼠标的形状主要有:手形、移动、正在执行、十字形等等,下面为大家介绍下如何修改鼠标的css样式

鼠标的形状主要有:
手形
移动
正在执行
十字形
文本编辑I
帮助
等待
文本编辑I
自动(遇到文本变I,遇到链接变手形,遇到可扩展边缘变向各方向拉伸形状……)
默认(箭头) www.jb200.com整理
向右变形(东east)
向右上变形
向左上变形
向上变形(北north)
向右下变形
向左下变形
向下变形(南south)
向左变形(西western)

例子:
 

<div style="cursor: pointer;">手形</div>
<div style="cursor: move;">移动</div>
<div style="cursor: progress;">正在执行</div>
<div style="cursor: crosshair;">十字形</div>
<div style="cursor: text;">文本编辑I</div>
<div style="cursor: help;">帮助</div>
<div style="cursor: wait;">等待</div>
<div style="cursor: inherit;">文本编辑I</div>
<div style="cursor: auto;">自动(遇到文本变I,遇到链接变手形,遇到可扩展边缘变向各方向拉伸形状……)</div>
<div style="cursor: default;">默认(箭头)</div>
<div style="cursor: e-resize;">向右变形(东east)</div>
<div style="cursor: ne-resize;">向右上变形</div>
<div style="cursor: nw-resize;">向左上变形</div>
<div style="cursor: n-resize;">向上变形(北north)</div>
<div style="cursor: se-resize;">向右下变形</div>
<div style="cursor: sw-resize;">向左下变形</div>
<div style="cursor: s-resize;">向下变形(南south)</div>
<div style="cursor: w-resize;">向左变形(西western)</div>

三,css 鼠标样式和手指样式

十五种CSS鼠标样式

CSS鼠标样式语法:
任意标签中插入 style="cursor:*"
例 子:<span style="cursor:*">文本或其它页面元素</span> <a href="#" style="cursor:*">文本或其它页面元素</a> 注意把 * 换成如下15个效果的一种:

hand是手型
例子:CSS鼠标手型效果 <a href="#" style="cursor:hand">CSS鼠标手型效果</a>

pointer也是手型,这里推荐使用这种,因为这可以在多种浏览器下使用。
例子:CSS鼠标手型效果 <a href="#" style="cursor:pointer">CSS鼠标手型效果</a>

crosshair是十字型
例子:CSS鼠标十字型 效果 <a href="#" style="cursor:crosshair">CSS鼠标十字型 效果</a>

help是问号
例子:CSS鼠标问号效果 <a href="#" style="cursor:help">CSS鼠标问号效果</a>

其它:
 

text是移动到文本上的那种效果
wait是等待的那种效果
default是默认效果
e-resize是向右的箭头
ne-resize是向右上的箭头
n-resize是向上的箭头
nw-resize是向左上的箭头
w-resize是向左的箭头
sw-resize是左下的箭头
s-resize是向下的箭头
se-resize是向右下的箭头
auto是由系统自动给出效果