html 鼠标指针讲解

html 鼠标指针

详情可以看https://www.w3school.com.cn/tiy/t.asp?f=csse_cursor

测试代码:

<html>

<body>
<p>请把鼠标移动到单词上,可以看到鼠标指针发生变化:p>
<span style="cursor:auto">
Autospan><br />
<span style="cursor:crosshair">
Crosshairspan><br />
<span style="cursor:default">
Defaultspan><br />
<span style="cursor:pointer">
Pointerspan><br />
<span style="cursor:move">
Movespan><br />
<span style="cursor:e-resize">
e-resizespan><br />
<span style="cursor:ne-resize">
ne-resizespan><br />
<span style="cursor:nw-resize">
nw-resizespan><br />
<span style="cursor:n-resize">
n-resizespan><br />
<span style="cursor:se-resize">
se-resizespan><br />
<span style="cursor:sw-resize">
sw-resizespan><br />
<span style="cursor:s-resize">
s-resizespan><br />
<span style="cursor:w-resize">
w-resizespan><br />
<span style="cursor:text">
textspan><br />
<span style="cursor:wait">
waitspan><br />
<span style="cursor:help">
helpspan>
body>

html>

大家可以看一看效果:

每一个鼠标指针都是不一样的,大家可以自己试一试。

至此,我们可以制作一个坑人小程序。

<html>

<body>
<p>请把鼠标放在下面两个文字上面查看你的电脑性能。转圈圈表示很卡,指针表示很好,问号表示未知p>
<span style="cursor:wait">
性能检测1span><br />
<span style="cursor:help">
性能检测2span>
body>

html>

这个程序是一个假的性能检测。可以自己看看效果。

有任何事情,可以点击QQ联系找我。

写于2019-11-04 12:26:29 

 

 

你可能感兴趣的:(html 鼠标指针讲解)