CSS+元素，鼠標事件觸發鼠標模形變成手狀的形狀

時間 2019-12-14

標籤 css 元素鼠標事件觸發模形變成形狀欄目 CSS 简体版

原文原文鏈接

CSS+元素，鼠標事件觸發鼠標模形變成手狀的形狀，以及其餘樣式。css

方案一：使用CSS樣式改變，鼠標移動到元素上顯示手狀。html

1 cursor:pointer;

方案二：使用JS觸發事件改變原樣式：鼠標事件onmouseover（鼠標移動到元素上觸發事件）觸發時設置樣式java

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案例演示jquery

 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>