前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >CSS 鼠标样式「建议收藏」

CSS 鼠标样式「建议收藏」

作者头像
全栈程序员站长
发布2022-08-23 13:44:30
1.2K0
发布2022-08-23 13:44:30
举报
文章被收录于专栏:全栈程序员必看

大家好,又见面了,我是你们的朋友全栈君。

巧合要用到鼠标样式效果,就顺便整理了下十五种 CSS鼠标样式,小例子供大家使用啊。CSS鼠标样式语法如下: 任意标签中插入 style=”cursor:*” 例子:<span style=”cursor:*”>文本或其它页面元素</span> <a href=”#”style=”cursor:*”>文本或其它页面元素</a> 注意把 * 换成如下15个效果的一种:

下面是对这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是由系统自动给出效果

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/138232.html原文链接:https://javaforall.cn

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022年5月6,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档