標籤：div -- cal click htm order title conf mouse
|| 著作權聲明：本文為博主原創筆記，未經博主允許不得轉載。
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+元素，滑鼠事件觸發滑鼠模形變成手狀的形狀
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
