CSS+元素，鼠标事件触发鼠标模形变成手状的形状

最新推荐文章于 2024-04-30 16:57:21 发布

weixin_30597269

最新推荐文章于 2024-04-30 16:57:21 发布

阅读量614

点赞数 1

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/blogslee/p/7483852.html

版权

CSS+元素，鼠标事件触发鼠标模形变成手状的形状，以及其他样式。

方案一：使用CSS样式改变，鼠标移动到元素上显示手状。

1 cursor:pointer;

方案二：使用JS触发事件改变原样式：鼠标事件onmouseover（鼠标移动到元素上触发事件）触发时设置样式

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

 cursor属性的常用取值，如下： 
 2 default                 ：标准箭头光标 
 3 pointer, hand           ：手形光标  
 4 auto                    ：标准光标  
 5 all-scroll              ：三角方向光标  
 6 move                    ：移动光标  
 7 crosshair               ：十字光标 
 8 wait                    ：0等待光标  
 9 text                    ：I字母形光标  
10 vertical-text           ：水平I形光标  
11 no-drop                 ：不可拖动光标  
12 not-allowed             ：无效光标  
13 help                    ：帮助光标  
14

demo案例演示

 1 <html>
 2     <head>
 3         <meta charset="UTF-8">
 4         <title></title>
 5     </head>
 6     <style type="text/css">
 7         .CoverTittle {
 8             width: 100%;
 9             height: 2em;
10             line-height: 2em;
11             background-color: #208ad3;
12             color: #fff;
13             font-size: 2em;
14             text-align: center;
15             border: 0.3em 0.3em 0 0;
16             position: relative;
17         }
18         .amove{
19             cursor: pointer;
20         }
21     </style>
22     <script src="../js/jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
23     <script type="text/javascript">
24         $(function(){
25             // 点击cancel事件
26             resetPassConfirm = function(){
27                 alert("cancel");
28             }
29             // div点击事件
30             divclick = function(){
31                 alert('div');
32                 parseInt();
33             }
34             
35         });
36     </script>
37     <body>
39     <div id="resetPassConfirm" οnclick="divclick();" class="CoverTittle tbtn" style="width: 100%;" >
40         <span οnclick="resetPassConfirm();" id="attentionConfirm" οnmοusemοve='this.className="amove"'>Cancel</span>
41     </div>
42     <br />
43   　　<--!  onmousemove鼠标移动到元素上触发事件：该变当前元素的样式，使用this.className="自定义Name"，设置样式cursor: pointer;-->
44     <div id="resetPassConfirm" οnclick="divclick();" class="CoverTittle tbtn" style="width: 100%;" 
45         οnmοusemοve='this.className="CoverTittle amove"'>
46         <span οnclick="resetPassConfirm();" id="attentionConfirm">Cancel</span>
47     </div>
49         <p>新建段落</p>
50         <div id="TipConfirmTbtn"  class="CoverTittle tbtn" style="width: 100%; display: block;background-color: #208ad3;">Confirm</div>
51         <div style="position: relative;top: 30px;left: 20px;">
52             sdfds
53         </div>
54     </body>
55 </html>

只有当鼠标移动到Cancel文本上时，才出发事件，改变手状光标

Cancel

<--! onmousemove鼠标移动到元素上触发事件：该变当前元素的样式，使用this.className="自定义Name"，设置样式cursor: pointer;-->

Cancel：这是指定整个div的光标css样式为手状

新建段落

Confirm：这是一个文本的div，鼠标原样式为光标

转载于:https://www.cnblogs.com/blogslee/p/7483852.html

weixin_30597269

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS+元素，鼠标事件触发鼠标模形变成手状的形状

|| 版权声明：本文为博主原创笔记，未经博主允许不得转载。CSS+元素，鼠标事件触发鼠标模形变成手状的形状，以及其他样式。方案一：使用CSS样式改变，鼠标移动到元素上显示手状。1 cursor:pointer;方案二：使用JS触发事件改变原样式：鼠标事件onmouseover（鼠标移动到元素上触发事件）触发时设置样式1 // 使用在元素的标签上的事件2 // 第...
复制链接

扫一扫