鼠标样式

hand:是大家所熟悉的手型。

crosshair:是十字型,就是小乌龟首页所用的样式。
text:是平时鼠标移动到文本上的样式。
wait:是等待的效果。
default:是默认的那种效果。
help:是带问号的鼠标样式。
e-resize:是向右的箭头。
ne-resize:是向右上方的箭头。
n-resize:是向上的箭头。
nw-resize:是向左上方的箭头。
w-resize:是向左的箭关。
sw-resize:是向左下的箭头。
s-resize:是向下的箭头。
se-resize:是向右下方的箭头。
auto:是系统自动的效果。 

当然根据需要你也可以将样式应用于其它标签,或者单纯的只应用于某一段文本。如果读者对CSS代码不陌生的话,或许直接手写代码更方便。特别是,如果你想在不同的位置运用不同的鼠标样式,或者不同的标签使用不同的鼠标样式。直接将样式写在某个具体的标签里边就可以了。

方法是:<tag style="cursor:mouse_style">。其中tag是标签名,mouse_style就是鼠标样式,如hand/crosshair/text/wait等等。

下面举个具体的实例以加深大家对鼠标样式设置的理解。

<span style="cursor:hand"> hand:是大家所熟悉的手型。</span><br>
<span style="cursor:crosshair">crosshair:是十字型,就是小乌龟首页所用的样式。</span><br>
<span style="cursor:text">text:是平时鼠标移动到文本上的样式。</span><br>
<span style="cursor:wait">wait:是等待的效果。</span><br>
<span style="cursor:default">default:是默认的那种效果。</span> <br>
<span style="cursor:help">help:是带问号的鼠标样式。</span><br>
<span style="cursor:e-resize">e-resize:是向右的箭头。</span><br>
<span style="cursor:ne-resize">ne-resize:是向右上方的箭头。</span><br>
<span style="cursor:n-resize">n-resize:是向上的箭头。</span><br>
<span style="cursor:nw-resize">nw-resize:是向左上方的箭头。</span><br>
<span style="cursor:w-resize">w-resize:是向左的箭关。</span><br>
<span style="cursor:sw-resize">sw-resize:是向左下的箭头。</span><br>
<span style="cursor:s-resize">s-resize:是向下的箭头。</span><br>
<span style="cursor:se-resize">se-resize:是向右下方的箭头。</span><br>
<span style="cursor:auto">auto:是系统自动的效果。</span> 

将上面这段代码拷到你的网页中,按F12预览。将你的鼠标移到相应的文本上方,看看鼠标有什么变化?是不是以相应的样式显现了?

<style>
*{font-size:12px}
:visited,:active,:link{ text-decoration:none;color:navy}
body{ cursor:url(http://webme.bokee.com/inc/mouse001.ani)}
</style>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值