|| 版权声明:本文为博主原创笔记,未经博主允许不得转载。
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 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=" 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=" 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=" 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,鼠标原样式为光标