|| 版权声明：本文为博主原创笔记，未经博主允许不得转载。
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 ????????????sdfds53 ????????</div>54 ????</body>55 </html>只有当鼠标移动到Cancel文本上时，才出发事件，改变手状光标
Cancel
<--! onmousemove鼠标移动到元素上触发事件：该变当前元素的样式，使用this.className="自定义Name"，设置样式cursor: pointer;-->
Cancel：这是指定整个div的光标css样式为手状
新建段落
Confirm：这是一个文本的div，鼠标原样式为光标
CSS+元素，鼠标事件触发鼠标模形变成手状的形状
原文地址：http://www.cnblogs.com/blogslee/p/7483852.html