| | Copyright Notice : This article is the original note for bloggers, not allowed to be reproduced without the permission of Bo master.
css+ elements, mouse events trigger mouse patterns into hand shaped shapes, and other styles.
Scenario One: Using CSS style changes, the mouse moves to the element to show the hand shape.
1 Cursor:pointer;
Scenario Two: Use JS trigger event to change the original style: Mouse event onmouseover (mouse move to element trigger event) set style when triggered
1 //Use an event on the element's label 2 //First way 3 onmouseover= "this.style.cursor= ' Mousehand '" 4 5 //Second way 6 onmouseover= "this. Classname= ' Mousehand ' "
common values for the cursor property are as follows:
2 default: Standard arrow cursor3 pointer, hand: Hand cursor4 Auto: Standard cursor5all-Scroll: Triangular direction cursor6 Move : Moves the cursor7 crosshair: Cross cursor8 wait:0 wait cursor9 text:i letter-shaped cursorTenvertical-Text: Horizontal I-shaped cursor Oneno-drop: Non-dragging cursor Anot-allowed: Invalid cursor - Help: Aid cursor -
Demo Case demonstration
123<meta charset= "UTF-8" >4<title></title>56<style type= "Text/css" >7 . Covertittle {8width:100%;9 Height:2em;Tenline-Height:2em; Onebackground-color: #208ad3; A color: #fff; -font-Size:2em; -text-Align:center; theBorder:0.3em 0.3em 0 0; - position:relative; - } - . amove{ + Cursor:pointer; - } +</style> A<script src= ". /js/jquery-3.2.1.js "type=" Text/javascript "charset=" Utf-8 "></script> at<script type= "Text/javascript" > -$(function(){ - //Click the Cancel event -Resetpassconfirm =function(){ -Alert ("Cancel"); - } in //Div Click event -Divclick =function(){ toAlert (' div '); + parseint (); - } the * }); $</script>Panax Notoginseng<body> the<div id= "resetpassconfirm" onclick= "Divclick ();" class= "Covertittle tbtn" style= "width:100%;" > +<span onclick= "resetpassconfirm ();" Id= "Attentionconfirm" onmousemove= "this.classname=" Amove "' >Cancel</ Span> A</div> the<br/> +<--! OnMouseMove the mouse moves to the element trigger event: The style that changes the current element, using this.classname= "Custom name", set style cursor:pointer;--> -<div id= "resetpassconfirm" onclick= "Divclick ();" class= "Covertittle tbtn" style= "width:100%;" $Onmousemove= ' this.classname= "Covertittle amove" > $<span onclick= "resetpassconfirm (); id=" Attentionconfirm ">Cancel</span> -</div> the<p> New paragraph </p> -<div id= "tipconfirmtbtn" class= "Covertittle tbtn" style= "width:100%; Display:block;background-color: #208ad3; " >Confirm</div>Wuyi<div style= "position:relative;top:30px;left:20px;" > the Sdfds -</div> Wu</body> -Start event only when mouse moves to cancel text, change hand cursorCancel
<--! onmousemove the mouse moves to the element trigger event: The style that changes the current element, using this.classname= "Custom name", setting the style cursor:pointer;-->Cancel: This is the cursor CSS style that specifies the entire div as a hand-shapedNew paragraph
Confirm: This is a text div, the mouse original style is the cursorcss+ elements, mouse events trigger the mouse to form a hand-shaped shape