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

|| 版权声明：本文为博主原创笔记，未经博主允许不得转载。

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

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

1 cursor:pointer;

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

1 // 使用在元素的标签上的事件
2 // 第一种方式
3 onmouseover="this.style.cursor=\'mouseHand\'"
4 
5 // 第二种方式
6 onmouseover="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" onclick="divclick();" class="CoverTittle tbtn" style="width: 100%;" >
40         <span onclick="resetPassConfirm();" id="attentionConfirm" onmousemove=\'this.className="amove"\'>Cancel</span>
41     </div>
42     <br />
43   　　<--!  onmousemove鼠标移动到元素上触发事件：该变当前元素的样式，使用this.className="自定义Name"，设置样式cursor: pointer;-->
44     <div id="resetPassConfirm" onclick="divclick();" class="CoverTittle tbtn" style="width: 100%;" 
45         onmousemove=\'this.className="CoverTittle amove"\'>
46         <span onclick="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>

.CoverTittle { width: 100%; height: 2em; line-height: 2em; background-color: rgba(32, 138, 211, 1); color: rgba(255, 255, 255, 1); font-size: 2em; text-align: center; position: relative }
.amove { cursor: pointer }

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

Cancel

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

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

新建段落

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

版权声明：本文为blogslee原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/blogslee/p/7483852.html