css+ elements, mouse events trigger the mouse to form a hand-shaped shape

Last Update:2017-09-06 Source: Internet

Author: User

Tags custom name

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

| | 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 cursor
Cancel
<--! 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-shaped
New paragraph
Confirm: This is a text div, the mouse original style is the cursor
css+ elements, mouse events trigger the mouse to form a hand-shaped shape

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More