|| 版权声明：本文为博主原创笔记，未经博主允许不得转载。
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>
只有当鼠标移动到Cancel文本上时，才出发事件，改变手状光标
Cancel
<--! onmousemove鼠标移动到元素上触发事件：该变当前元素的样式，使用this.className="自定义Name"，设置样式cursor: pointer;-->
Cancel：这是指定整个div的光标css样式为手状
新建段落
Confirm：这是一个文本的div，鼠标原样式为光标
时间： 2024-07-31 14:23:13