首页 > 其他分享 >CSS鼠标样式(cursor)

CSS鼠标样式(cursor)

时间:2024-03-11 10:13:28浏览次数:27  
标签:表示 鼠标 text 可以 cursor 光标 CSS resize

一、CSS cursor 基本语法

cursor属性是什么:指鼠标指针放在一个元素边界范围内时所呈现的光标形状,它包括问号,小手等形状。
使用时可以在任何你想要添加的标签里,插入style="cursor : 某属性值" ,也可以在CSS样式中添加。
比如:
pointer,小手形状
help,帮助形状 。
cursor的属性值有十几种可选值,在工作中根据需要选择合适的值即可。

二、CSS cursor 属性值

 

属性值 示意图 描述
auto   默认值,由浏览器根据当前上下文确定要显示的光标样式
default default 默认光标,不考虑上下文,通常是一个箭头
none   不显示光标
initial   将此属性设置为其默认值
inherit   从父元素基础 cursor 属性的值
context-menu context-menu 表示上下文菜单可用
help help 表示有帮助
pointer pointer 表示一个链接
progress progress 进度指示器,表示程序正在执行一些处理,但是您仍然可以在该界面进行一些操作(与 wait 不同)
wait wait 表示程序繁忙,您应该等待程序指向完成
cell cell 表示可以选择一个单元格(或一组单元格)
crosshair crosshair 一个简单的十字准线
text text 表示可以选择的文本
vertical-text vertical-text 表示可以选择的垂直文本
alias alias 表示要创建别名或快捷方式
copy copy 表示可以复制某些内容
move move 表示可以移动鼠标下方的对象
no-drop no-drop 表示所拖动的项目不能放置在当前位置
not-allowed not-allowed 表示无法完成某事
all-scroll all-scroll 表示对象可以沿任何方向滚动(平移)
col-resize col-resize 表示可以水平调整列的大小
row-resize row-resize 表示可以垂直调整行的大小
n-resize n-resize 表示对象的边缘可以向上(向北)移动
e-resize e-resize 表示对象的边缘可以向右(向东)移动
s-resize s-resize 表示对象的边缘可以向下(向南)移动
w-resize w-resize 表示对象的边缘可以向左(向西)移动
ne-resize ne-resize 表示对象的边缘可以向上和向右(北/东)移动
nw-resize nw-resize 表示对象的边缘可以向上和向左(北/西)移动
se-resize se-resize 表示对象的边缘可以向下和向右(向南/向东)移动
sw-resize sw-resize 表示对象的边缘可以向下和向左(南/西)移动
ew-resize ew-resize 表示可以双向调整对象大小的光标
ns-resize ns-resize
nesw-resize nesw-resize
nwse-resize nwse-resize
zoom-in zoom-in 表示可以放大某些内容
zoom-out zoom-out 表示可以缩小某些内容
grab grab 表示可以抓取(拖动)某些东西
grabbing grabbing 表示已经抓取到某些东西
url("")    自定义光标的样式,括号中的内容为光标图像的源文件路径
提示:由于计算机系统的不同,鼠标的样式会存在一定的差异。

举列:
<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            height: 30px;
            border: 1px solid green;
            margin-top: 10px;
        }
        .cell {
            cursor: cell;
        }
        .crosshair {
            cursor: crosshair;
        }
        .text {
            cursor: text;
        }
        .vertical-text {
            cursor: vertical-text;
        }
        .alias {
            cursor: alias;
        }
        .copy {
            cursor: copy;
        }
        .move {
            cursor: move;
        }
        .no-drop {
            cursor: no-drop;
        }
    </style>
</head>
<body>
    <div class="cell">cursor: cell;</div>
    <div class="crosshair">cursor: crosshair;</div>
    <div class="text">cursor: text;</div>
    <div class="vertical-text">cursor: vertical-text;</div>
    <div class="alias">cursor: alias;</div>
    <div class="copy">cursor: copy;</div>
    <div class="move">cursor: move;</div>
    <div class="no-drop">cursor: no-drop;</div>
</body>
</html>

 

标签:表示,鼠标,text,可以,cursor,光标,CSS,resize
From: https://www.cnblogs.com/tcyweb/p/18065432

相关文章

  • 鼠标点击特效
    引号内可更改自己喜欢的内容/*鼠标特效*/vara_idx=0;jQuery(document).ready(function($){$("body").click(function(e){vara=newArray("❤野原新之助❤","❤野原广志❤","❤野原美伢❤","❤野原小白❤","❤野原向日葵❤","❤风间❤&......
  • 关于 Linux 中模拟鼠标
    问题的背景是我想用自动化脚本来玩StardewValley的小游戏,刷钱,但是遇到了一系列问题,这里记录我的一些历程。pyautogui/pydirectinputpyautogui是我第一个考虑的方案。虽然可以正常的移动鼠标,点击,但是游戏内却没有点击事件。搜索发现一般游戏在windows下使用的是directX,所......
  • 规则七:避免css表达式
    当页面动态变化时,对于各种事件,例如改变大小,滚动和鼠标移动。这些都会发送请求进行求值,这样就导致了求值进行的非常繁琐。如何避免:使用一次性表达式:将值设置成为固定值,去除css表达式使用事件处理器:这样可以避免在无关事件发生时对表达式的求值。  ......
  • css滤镜图片的原样生成
    现在需要对一个复杂滤镜的图片进行保存,使这个图片能保留滤镜的效果。原理很简单,就是在原来image的基础上,新建一个canvas,然后增加滤镜效果,画出这个图片,最后保存这个图片到本地。js代码简单版本(未实现批量)`ApplyFiltertoImage<script>constoriginalImage=document......
  • htmi总结+css
    HTML表单学习<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>登录注册</title></head><body><h1>注册</h1><!--表单formaction:表单提交的位置可以是网站,也可以是一个请求的位置m......
  • 深入理解与应用CSS clip-path 属性
    clip-pathclip-path是什么clip-path是一个CSS属性,允许开发者创建一个剪切区域,从而决定元素的哪些部分可见,哪些部分会被隐藏。通过定义这个剪切路径(clippingpath),您可以创造出非矩形的裁剪形状,使元素内容按特定的几何形状展示。clip-path的工作原理clip-path属性通过定义......
  • css样式属性 使用汇总,补齐前端短板
    ---------------index.css常用网站css样式属性使用汇总1-------------/*先删除默认的内外边距*/*{margin:0;padding:0;}body{background-color:#fafafa;height:2000px;}li{list-style:none;/*取消li的符号*/}/*顶部导航栏开......
  • HTML+CSS 实现简单打印页
    代码:<!DOCTYPEhtml><html><head><title>分页打印示例</title><style>/*打印样式*/@mediaprint{.page{page-break-after:always;/*每个.page元素后都分页*/}}</style>......
  • 通过canvas实现鼠标绘图的注意点
    问题情景:想设置全屏canvas时,直接修改了canvas的css样式为width:100%。出现问题:绘图时坐标不对应且有明显放大感。问题原因:css中width是将canvas尺寸直接放大,而实际需要的是修改canvas本身的尺寸。解决办法:直接定义canvas.width和canvas.height。我用的是vue3所以用了onMount......
  • ChatGPT 新增朗读功能;微软 Win11 鼠标悬停自动打开 Copilot 丨 RTE 开发者日报 Vol.15
      开发者朋友们大家好: 这里是「RTE开发者日报」,每天和大家一起看新闻、聊八卦。我们的社区编辑团队会整理分享RTE(RealTimeEngagement)领域内「有话题的新闻」、「有态度的观点」、「有意思的数据」、「有思考的文章」、「有看点的会议」,但内容仅代表编辑的个人观点......