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

Source: Internet
Author: User
Tags custom name

| | 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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.