cursor 状态 总结 this.style.cursor

最新推荐文章于 2022-12-06 12:00:09 发布
最新推荐文章于 2022-12-06 12:00:09 发布
阅读量2.7k 收藏
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xixi_666/article/details/17026171
版权

使用

1、
<STYLE>
P { cursor : hand; }
</STYLE>
2、
<STYLE>
oBox.style.cursor = "url(" + Some_Uniform_Resource_Identifier + ")";
</STYLE>
3、
<P οnmοuseοver="this.style.cursor='hand'">
4、js   wraper为某对象ID
$("wraper").style.cursor='wait';

例子 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <STYLE>
	/*P { cursor : hand; }*/
	oBox.style.cursor = "url(" + Some_Uniform_Resource_Identifier + ")";
  </STYLE>
 </HEAD>
 
 <BODY>
  <p>
  /*正常鼠标 */
	cursor:auto; 
	/*十字鼠标 */
	cursor:crosshair;
	/*默认鼠标 */
	cursor:default;
	/*手*/
	cursor:pointer;
	/*移动鼠标 */
	cursor:move; 
	/*改变大小鼠标 */
	cursor:e-resize,ne-resize,nw-resize,n-resize,se-resize,sw-resize,s-resize,w-resize;
	/*文字鼠标 */
	cursor:text; 
	/*等待鼠标 */
	cursor:wait; 
	/*求助鼠标 */
	cursor:help;
  </p>
  <P οnmοuseοver="this.style.cursor='auto'">正常鼠标auto</p>
  <P οnmοuseοver="this.style.cursor='crosshair'">十字鼠标crosshair</p>
  <P οnmοuseοver="this.style.cursor='default'">默认鼠标default</p>
  <P οnmοuseοver="this.style.cursor='hand'">手hand</p>
  <P οnmοuseοver="this.style.cursor='help'">求助鼠标help</p>
  <P οnmοuseοver="this.style.cursor='move'">移动鼠标move</p>
  <P οnmοuseοver="this.style.cursor='pointer'">手pointer</p>
  
  <!--
  <P οnmοuseοver="this.style.cursor='e-resize,ne-resize,nw-resize,
			n-resize,se-resize,sw-resize,s-resize,w-resize'">改变大小鼠标</p>-->
  <P οnmοuseοver="this.style.cursor='text'">文字鼠标text</p>
  <P οnmοuseοver="this.style.cursor='wait'">等待鼠标wait</p>
  <p>======new======</p>
  <P οnmοuseοver="this.style.cursor='all-scroll'">all-scroll </p>
  <P οnmοuseοver="this.style.cursor='col-resize'">col-resize </p>
  <P οnmοuseοver="this.style.cursor='no-drop'">no-drop </p>
  <P οnmοuseοver="this.style.cursor='not-allowed'">not-allowed </p>
  <P οnmοuseοver="this.style.cursor='progress'">progress </p>
  <P οnmοuseοver="this.style.cursor='row-resize'">row-resize </p>
  <P οnmοuseοver="this.style.cursor='vertical-text'">vertical-text </p>
  <P οnmοuseοver="this.style.cursor='vertical-text'">url(uri) 用户自定义 cursor:url('#');#=光标文件地址(注意文件格式必须为.cur或.ani)。 </p>
 </BODY>
</HTML>


xixi_666
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
如何变换鼠标样式
yehell的专栏
11-07 2714
Eg:.myMouse{cursor:hand}鼠标样式列表： 把你的光标放到相应文字上查看效果 要注意光标的实际效果依赖于用户的系统设置，与你在这里看到的效果并不一定一致。
jquery拖拉布局.zip
10-19
在`css`目录下的样式文件（如`style.css`）中，我们可以设置拖动元素的样式，使其可以被拖动： ```css .dragItem { position: absolute; width: 100px; height: 100px; background-color: #f00; cursor: move; ...
css 兼容性问题this.style.cursor=''hand''
10-30
css 兼容性问题this.style.cursor='hand'让我们来CSS HACK
Cursor:url()的使用
weixin_34026276的博客
05-22 627
自定义鼠标样式，格式：css:{cursor:url('绝对路径的图片(格式：cur,ico)'),-moz-zoom-out;}//FF下面css:{cursor:url('绝对路径'),auto;}//IE,FF,chrome浏览器都可以前面url是自定义鼠标格式，图像的绝对路径地址，后面的参数是css标准的cursor样式，（IE下面可以不需要）图标的格式根据不同的浏览器来分：IE支持cur...
CSS cursor(鼠标状态)属性
perny的专栏
02-06 6996
/*正常鼠标 */ cursor:auto; /*十字鼠标 */ cursor:crosshair; /*默认鼠标 */ cursor:default; /*手*/ cursor:pointer; /*移动鼠标 */ cursor:move; /*改变大小鼠标 */ cursor:e-resize,ne-resize,nw-resize,n-resize,se-resize,sw-resize
td onmouseover="this.style.cursor='hand'" onmouseout="this.style.cursor='normal'" >小手状
weixin_30835649的博客
08-09 121
td onmouseover="this.style.cursor='hand'" onmouseout="this.style.cursor='normal'" >小手状 转载于:https://www.cnblogs.com/y0umer/archive/2009/08/09/3839457.html
elementUI vue this.$confirm 和el.docx
11-22
dialogHeaderEl.style.cursor = 'move' // ... } }) ``` 在上面的代码中，我们定义了一个名为 `dialog-drag` 的自定义指令，该指令可以使对话框头部可拖拽。 ElementUI 的 `$confirm` 和 `el-dialog` 组件提供了...
vue中音频wavesurfer.js的使用方法
10-15
cursor: pointer; font-size: 20px; } .myplay { color: green; } .mystop { color: red; } </style> ` 在Vue项目中使用wavesurfer.js库来处理音频，首先需要理解wavesurfer.js的核心功能，它是一个强大的Web...
jquery鼠标悬停图片放大、鼠标状态自定义切换.zip
最新发布
09-27
此外，`<style>`或`<link>`标签可能用于引入CSS样式表，`<script>`标签则用于引入jQuery库。 jQuery是一个强大的JavaScript库，它简化了DOM操作、事件处理、动画效果以及Ajax交互等任务。在本项目中，jQuery的`...
又见兼容性问题 this.style.cursor='hand' 让我们来CSS HACK
洛科的博客
11-05 3009
先看这一句a href=# onmouseover="this.style.cursor=hand" onmouseout="this.style.cursor=default" onclick="document.getElementById(ShowContent).innerHTML=;return false;">    img alt="清空屏幕" s
很多很好的光标文件，cur格式的
03-01
一些有用的光标(.cur)，放大，缩小，手型，缓冲...MFC应用程序等开发很有用的。
光标cur 资源
07-18
光标CUR资源
超实用光标素材合集 mouse.rar (.cur和.ani)
07-14
本资源包含超实用的光标资源（mouse.rar）和光标制作工具（Art Cursor）
style=‘cursor:pointer‘
weixin_43862596的博客
05-10 3180
<tr> <th data-field="detailId" onmousemove="hand(this)">标识</th> </tr> js: function hand(tdObj){ tdObj.style.cursor = "pointer"; } style=“cursor:pointer” 是css的一种样式，作用是当鼠标移动到该单元格上时，鼠标会由箭头形状改为手的形状。 <td style="cur.
CSS选择器修改样式，及单独修改样式this.style.
sinat_26992509的博客
09-12 5964
css选择器：修改样式 实现开关灯效果       开关灯效果    body  {      background: #FFF;  } .day {     background: #000; } .night {     background: #FFF; }         function Switch() {     var btnSw
jquery设置cursor的属性改变光标的类型（形状）
热门推荐
terence的博客
12-09 8万+
第一种：通过增加Class $("td").hover( function () { $(this).addClass("hover"); }, function () { $(this).removeClass("hover"); } ); 第二种：通过直接设置Style $('td').hover( function() { this.style.cursor = 'pointer'; ...
cursor（鼠标手型）属性
weixin_45328388的博客
12-06 8820
㈠简单介绍在浏览网页时，通常看到的鼠标光标形状有箭头、手形、沙漏等，而在 windows 中实际看到的鼠标指针种类比这个还要多。一般情况下，鼠标光标的形状由浏览器负责控制，大多数情况的光标形状为箭头形状，当指向链接时，光标形状会变成手指形状。cursor 属性规定要显示的光标的类型（形状）。该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状。㈡属性值 ㈢属性简单讲解cursor属性的默认值为 auto， 它表示由浏览器根据当前上下文，自动确定最适合的光标类型。auto 与 default 不同，
鼠标指针操作
UruseiBest 的技术专栏
10-24 1615
可以直接使用Dim cur As New Cursor(bmp.GetHicon)，这里为了演示光标的HotSpot（光标作用点），所以做了些变化，从图中可以看到，光标的作用点，并不是在红色方框的位置，跟踪HotSpot属性可以得知，这个点的坐标（32，32），图片大小为64*64，所以光标作用点是在图片中心位置。HotSpot（光标作用点）是按下鼠标时，光标图片在屏幕上实际“点击”的位置，使用默认箭头状鼠标时，光标作用点在箭头尖上，即光标图片左上角。成员xHotspot：光标在横坐标上的作用点坐标。
前端鼠标形状设置--cursor
ZHHhao的博客
05-13 4859
前端鼠标形状设置–cursor 前端鼠标形状设置，可以通过设置cursor属性来修改。 在Vue项目中，改变鼠标形状设置：在index.html中写入下面的代码即可。 body{ cursor: url('./favicon.ico'),default; } 效果图如下： 以下是cursor的一些基础属性，大家可以挨个试试。。。## 标题 default 默认光标（通常是一个箭头） auto 默认。浏览器设置的光标。 crosshair 光标呈现为十字线
protected void gvInfo_RowDataBound(object sender, GridViewRowEventArgs e) { //鼠标移动变色 if (e.Row.RowType == DataControlRowType.DataRow) { //当鼠标放上去的时候 先保存当前行的背景颜色 并给附一颜色 e.Row.Attributes.Add("onmouseover", "currentcolor=this.style.backgroundColor;this.style.backgroundColor='#f6f6f6',this.style.fontWeight='';"); //当鼠标离开的时候 将背景颜色还原的以前的颜色 e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=currentcolor,this.style.fontWeight='';"); } //单击行改变行背景颜色 if (e.Row.RowType == DataControlRowType.DataRow) { e.Row.Attributes.Add("onclick", "this.style.backgroundColor='#f6f6f6'; this.style.color='buttontext';this.style.cursor='default';"); } } protected void gvOrderInfo_PageIndexChanging(object sender, GridViewPageEventArgs e) { gvOrderInfo.PageIndex = e.NewPageIndex; Get_Info(); }
06-09
这是一个 C# 代码片段，包含两个方法。第一个方法名为 "gvInfo_RowDataBound"，在 GridView 绑定数据的时候会被调用，作用是为 GridView 的每一行添加特定的鼠标事件，实现鼠标悬停和离开时的背景颜色变化和文字加粗...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值