CSS+JS鼠标事件触发鼠标模形实现手状

简介: CSS+JS鼠标事件触发鼠标模形实现手状

 1. 直接使用CSS样式改变

    当鼠标移动到元素上显示手状。

style="cursor:pointer;"

 2. 使用JS触发事件改变原样式:

1 // 使用在元素的标签上的事件
2 // 第一种方式
3 onmouseover="this.style.cursor='mouseHand'"
4 
5 // 第二种方式
6 onmouseover="this.ClassName=‘mouseHand’“

3. cursor属性的常用取值,如下:

 1 default                 :标准箭头光标 
 2 pointer, hand           :手形光标  
 3 auto                    :标准光标  
 4 all-scroll              :三角方向光标  
 5 move                    :移动光标  
 6 crosshair               :十字光标 
 7 wait                    :0等待光标  
 8 text                    :I字母形光标  
 9 vertical-text           :水平I形光标  
10 no-drop                 :不可拖动光标  
11 not-allowed             :无效光标  
12 help                    :帮助光标  


相关文章
|
JavaScript 前端开发 Go
CSS 与 JS 对 DOM 解析和渲染的影响
【10月更文挑战第16天】CSS 和 JS 会在一定程度上影响 DOM 解析和渲染,了解它们之间的相互作用以及采取适当的优化措施是非常重要的。通过合理的布局和加载策略,可以提高网页的性能和用户体验,确保页面能够快速、流畅地呈现给用户。在实际开发中,要根据具体情况进行权衡和调整,以达到最佳的效果。
635 57
|
JavaScript 算法 开发者
如何用JS实现在网页上通过鼠标移动批量选择元素的效果?
本文介绍了类似电脑桌面通过鼠标选择多个图标的实现原理。主要通过监听mousedown、mousemove和mouseup事件,动态调整选择框大小并计算与元素的重叠情况。提供了角重叠和相交重叠的检测方法,并附有示例代码和在线演示链接,方便开发者参考与测试。
477 56
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
676 33
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
314 24
|
前端开发
|
JavaScript 前端开发 测试技术
盘点原生JavaScript中直接触发事件的方式
本文全面探讨了原生JavaScript中触发事件的多种方式,包括`dispatchEvent`、`Event`构造函数、`CustomEvent`构造器、直接调用事件处理器以及过时的`createEvent`和`initEvent`方法。通过技术案例分析,如模拟点击事件、派发自定义数据加载事件和实现提示框系统,帮助开发者掌握这些方法在实际开发中的应用,提升灵活性与兼容性。
602 3
|
JavaScript 前端开发
页面滚动触发css3动画js插件
delighters.js是一款页面滚动触发css3动画js插件。该js插件可以在页面向下滚动时,为进入浏览器视口的元素制作各种炫酷的CSS3动画效果。
243 13
|
前端开发 JavaScript UED
CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随,再到滚动触发动画
本文探讨了CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随,再到滚动触发动画,这些效果增强了页面的吸引力和互动性。视差滚动通过不同层次元素的差异化移动,增加了页面的深度感和沉浸感。文章还讨论了实现方法、性能优化及案例分析,旨在为设计师和开发者提供实用指导。
501 7
纸屑飘落生日蛋糕场景js+css3动画特效
纸屑飘落生日蛋糕CSS3动画特效是一款js+css3制作的全屏纸屑飘落,生日蛋糕点亮庆祝动画特效。
262 3

热门文章

最新文章