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>
只有当鼠标移动到Cancel文本上时，才出发事件，改变手状光标
Cancel
<--! onmousemove鼠标移动到元素上触发事件：该变当前元素的样式，使用this.className="自定义Name"，设置样式cursor: pointer;-->
Cancel：这是指定整个div的光标css样式为手状
新建段落
Confirm：这是一个文本的div，鼠标原样式为光标
