HTML中使用JS改变鼠标的样式

最新推荐文章于 2024-01-28 16:35:50 发布
最新推荐文章于 2024-01-28 16:35:50 发布
阅读量1.8w 收藏 13
点赞数 6
分类专栏： HTML JS 鼠标样式 文章标签： HTML JS 鼠标样式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013316152/article/details/100565450
版权
HTML 同时被 3 个专栏收录
3 篇文章 0 订阅
订阅专栏
JS
2 篇文章 0 订阅
订阅专栏
鼠标样式
1 篇文章 0 订阅
订阅专栏

最近做了一个小案例，需要改变鼠标的样式，综合一些大牛的方法，得到一个有效的方式

这里的example为一个组件的ID，这里设置鼠标在这个组件上使用时设置样式，最后的那个pointer为鼠标的样式

document.getElementById("example").style.cursor = "url(resource/pic/icons/magnifier3.cur) 12 12,pointer";

若设置全局的鼠标样式，则需要把  getElementById("example")   替换为body就可以了

document.body.style.cursor = "url(resource/pic/icons/magnifier3.cur) 12 12,pointer";

 

下边是鼠标的样式

_limbo_
关注
  • 6
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS小项目实践-鼠标移入移出改变元素样式
莉亚小屋
06-11 1215
鼠标移入移出改变元素样式 来源：B站JS从入门到精通视频 题目描述 通过函数实现鼠标移入移出改变元素样式，如从小红色方块变为大绿色方块 题目代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #div1 { width: 100px; height: 100px; back
html怎样修改光标的颜色,css中如何修改鼠标光标（指针）的样式和颜色
weixin_39726267的博客
06-03 1626
链接手指: cursor: pointer十 字 体: cursor:crosshair上下箭头: cursor:s-resize cursor:n-resize左右箭头: cursor:e-resize cursor:w-resize四方箭头: cursor:move加一问号: cursor:help右上角箭头: cursor:ne-resize cursor:sw-resize左上角箭头:...
js改变鼠标的形状和样式的方法
10-26
常用的改变鼠标样式的方法：如果你想鼠标移动到某个元素上改变鼠标样式 就在这个元素的样式里加上 cursor:(你想改的样式)
javascript 让鼠标变形状
曾皓
05-27 782
abc 各种样式的光标 auto ：标准光标 default ：标准箭头 hand ：手形光标 wait ：等待光标 text ...
JavaScript中改变鼠标指针样式的方法
icon-Y的博客
06-09 8933
JavaScript中改变鼠标指针样式的方法
在JavaScript中改变鼠标指针样式的方法
热门推荐
fate_flower的博客
03-09 1万+
在JavaScript中改变鼠标指针样式的方法 在js中我们可以通过cursor属性来设置鼠标指针的样式，例 var body = document.querySelector("body") body.style.cursor= "move" 以上代码就实现了页面打开后，鼠标的指针就被替换成一个十字架样式，其实还有很多样式，如下图所示 通过cursor属性我们还可以将指针替换为自定义图片...
前端js更改鼠标箭头为动态ani效果
heikerx的博客
01-28 810
改变鼠标样式 2023, 12.22 可以改变默认的鼠标样式，比如说把白色箭头改为游戏里的图标。在windows里可以直接在设置里改。在前端网页上可以使用.cur静态图标，也可以使用.ani动态鼠标。 前言 在windows上改鼠标样式很简单，打开设置，搜索鼠标设定直接改。支持静态和动态鼠标样式。在前端页面上也可以用炫酷的鼠标箭头效果。 一.更改网页上的静态鼠标样式.cur css支持更改静态鼠标样式.cur图标，可以在CSS文件里直接加上. * { cursor: url("./path/m
使用 JavaScript 更改鼠标指针
weixin_50251467的博客
07-18 882
文档对象模型 (DOM) 是标记语言文档（HTML 和 XML）的编程接口。它定义了文档的逻辑结构以及如何访问和修改文档。DOM 以结构化和分层的方式呈现网页，使开发人员和用户更容易浏览文档。使用 DOM，我们可以使用Document对象提供的方法或命令轻松访问和操作标签、id、类、属性或元素。今天的文章将教授如何使用 JavaScript 更改鼠标指针。有两种方法可以使用查询选择器更改鼠标指针或通过标签访问特定元素。
js改变鼠标的形状和样式.pdf
10-21
使用此函数，你可以轻松地为任何元素设置自定义鼠标样式。例如，如果你想让ID为"myElement"的元素在鼠标悬停时显示为禁止形状，可以调用`setCursorByID('myElement', 'not-allowed')`。 此外，你也可以在HTML元素的...
使用jquery自定义鼠标样式满足个性需求
10-26
此外，还可以通过添加和移除类来动态改变鼠标样式。例如，当鼠标悬停在某个元素上时应用自定义样式，离开时恢复默认样式： ```javascript $(document).ready(function() { $('#divContainer').hover( function() ...
鼠标悬停改变鼠标默认样式.zip
07-05
本文将详细讲解如何使用JavaScript实现"鼠标悬停改变鼠标默认样式"的效果，如标题"鼠标悬停改变鼠标默认样式.zip"所示。这个效果在描述中提到，当鼠标经过图片左侧时，鼠标指针变为向左的箭头，经过右侧则变为向右的...
鼠标悬停改变鼠标默认样式特效代码
03-20
1. CSS 鼠标样式自定义： CSS允许我们自定义鼠标的光标样式，通过`cursor`属性可以实现。例如，我们想在鼠标悬停时显示一个指向左的箭头，可以这样设置： ```css .image:hover { cursor: url('images/left-...
arcgis for js自定义鼠标样式.zip
10-18
在ArcGIS for JavaScript API中，自定义鼠标样式是一项重要的功能，它允许开发人员根据应用程序的需求改变地图交互时鼠标的外观和行为。ArcGIS for JS API是Esri公司提供的JavaScript库，用于构建地理信息系统（GIS...
【html+css3+js】 鼠标悬停控件改变鼠标样式
qq_46057971的博客
10-31 1024
常用的鼠标指针样式及cursor对应的属性。1.单引用 直接在控件的style里写。
JS改变鼠标样式
温故知新
03-31 5871
在HTML（源码）状态下，加入如下代码（其中的鼠标代码部分可替换成自己喜欢的鼠标样式  手型  代码：手型  十字型  代码：十字型  文本型  代码：文本型  等待效果  代码：等待效果  默认效果  代码：默认效果  问号效果  代码：问号效果  向右箭头效果  代码：向右箭头效果  向右上箭头效果  代码：向右上箭头效果  向上箭头效果  代码：向
js入门--鼠标触碰图标变换
qq_23946481的博客
03-22 1045
实现方法 所有的素材都在这张图片上，通过js逐渐改变原图片的样式，从而达到图标变换图片的效果 所需要的js基本语法 var t = setInterval(f(),time) 此方法为每隔time毫秒执行一次f() clearInterval(t) 停止此方法 str.test(newstr) 正则表达式，测试str中是否包含newstr var new = str....
2024年欧洲铝桁架市场主要企业市场占有率及排名.docx
07-17
2024年欧洲铝桁架市场主要企业市场占有率及排名.docx
torchaudio-0.13.1+cpu-cp39-cp39-win_amd64.whl
最新发布
07-17
torchaudio软件包，直接下载下来，通过命令窗口输入：pip install torchaudio-xxx.whl安装就行，再也不怕pip安装timeout了
js实现鼠标下滑样式改变
04-04
可以使用css中的:hover伪类实现鼠标下滑样式改变，也可以使用JavaScript实现。以下是一种JavaScript实现方式： HTML代码： ``` <div id="box">鼠标滑过我</div> ``` JavaScript代码： ``` var box = document.getElementById("box"); box.addEventListener("mouseover", function() { this.style.backgroundColor = "red"; }); box.addEventListener("mouseout", function() { this.style.backgroundColor = "white"; }); ``` 上述代码中，首先获取了id为"box"的元素，然后使用addEventListener()方法添加了鼠标移入和移出事件的监听器。当鼠标移入时，将元素的背景色设为红色，当鼠标移出时，将背景色恢复为白色。这样就实现了鼠标下滑样式改变的效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值