显示鼠标手型的样式代码:<html><body><p>请把鼠标移动到单词上,可以看到鼠标指针发生变化:</p><div style="cursor:pointer">Pointer</div><br /></body></html>。
给div添加设置cursor:pointer属性就可以了。cursor 属性规定要显示的光标的类型(形状),该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状,pointer就是手型样式,设pointer鼠标光标就是手型形状了。
代码运行如下:
扩展资料
在DIV CSS布局时候,对象内鼠标指针光标进行控制,比如鼠标经过指针变为手指形状等样式,鼠标指针样式cursor控制。系统默认鼠标指针样式外,可以通过CSS设置图片为鼠标指针,常见有些网站鼠标指针是各种各样小图片样式,当然这个是通过css cursor设置鼠标样式。
鼠标指针样式控制设置是比较常用的,在DIV+CSS布局时候,希望鼠标指向某个局部DIV标签对象时候,鼠标指针光标就变为手指状态,这个时候对对象DIV设置cursor: pointer即可。
参考资料:W3C官网-CSS cursor 属性
如何用CSS设置连接鼠标在上面变成手型?
用CSS设置连接鼠标在上面变成手型的方法:只需要对需要设置鼠标指针的文字加上一个 cursor: pointer 即可实现。
具体步骤:
一、打开前端开发软件,新建一个html代码页面。
二、在新建的html代码页面上找到<body>,在这个<body>标签里创建一个标签,a案例中使用的是<a>。
三、为新家<a>添加鼠标指针为手指样式。在html代码页面中找到<tilte>,在这个<title>后面创建一个<style>,然后在<style>中新建一个样式类,最后为这个样式类添加鼠标指针样式。
四、把鼠标指针样式添加到<a>标签上。
五、保存html代码后使用浏览器打开,当鼠标滑过<a>上的文字后即可看到鼠标变为了指针状态。
六、直接复制以下代码到新建的html文件上,粘贴保存后使用浏览器打开即可看到效果。
任意标签中插入 style="cursor:hand"多种形状可供选择
hand是手型
pointer也是手型,这里推荐使用这种,因为这可以在多种浏览器下使用。
crosshair是十字型
text是移动到文本上的那种效果
wait是等待的那种效果
default是默认效果
help是问号
e-resize是向右的箭头
ne-resize是向右上的箭头
n-resize是向上的箭头
nw-resize是向左上的箭头
w-resize是向左的箭头
sw-resize是左下的箭头
s-resize是向下的箭头
se-resize是向右下的箭头
auto是由系统自动给出效果