How to make the cursor to hand when a user hovers over a list item using CSS?
Use CSS property to create cursor to hand when user hovers over the list of items. First create list of items using HTML <ul> and <li> tag and then use CSS property :hover to cursor:grab; to make cursor to hand hover the list of items.
Syntax:
element:hover { cursor:grab/pointer; }
Example 1:
<!DOCTYPE html> < html > < head > < title >make cursor to hand</ title > < style > body { width:70%; } h1 { color:green; text-align:center; } li:hover{ cursor:grab; } </ style > </ head > < body > < h1 >GeeksforGeeks</ h1 > < div class = "sub" >Computer Science Subject Lists:</ div > < ul > < li >Data Structure</ li > < li >Algorithm</ li > < li >Operating System</ li > < li >Computer Networks</ li > < li >C Programming</ li > < li >Java</ li > < li >DBMS</ li > </ ul > </ body > </ html > |
Output:
Example 2: This example contains CSS property to change cursor pointer alternate. In this example, use nth-child(2n+1) as cursor:grab; and use nth-child(2n+2) as cursor:pointer;.
<!DOCTYPE html> < html > < head > < title >make cursor to hand</ title > < style > body { width:60%; } h1 { color:green; text-align:center; } li { font-size:20px; } li:nth-child(2n+1) { background: green; cursor:grab; width:50%; padding:5px; } li:nth-child(2n+2) { background: #CCC; cursor:pointer; width:50%; padding:5px; } </ style > </ head > < body > < h1 >GeeksforGeeks</ h1 > < div class = "sub" >Computer Science Subject Lists:</ div > < ul > < li >Data Structure</ li > < li >Algorithm</ li > < li >Operating System</ li > < li >Computer Networks</ li > < li >C Programming</ li > < li >Java</ li > < li >DBMS</ li > </ ul > </ body > </ html > |
Output:
Recommended Posts:
- How to remove indentation from an unordered list item using CSS?
- CSS | cursor property
- p5.js | cursor() Function
- HTML | DOM Style cursor Property
- Hide the cursor in a webpage using CSS and JavaScript
- How to change cursor style using jQuery ?
- How to set cursor style to pointer for links without href ?
- How to set cursor position in content-editable element using JavaScript ?
- How to change cursor to waiting state in JavaScript/jQuery ?
- HTMLCollection item() Method
- HTML | DOM item() Method
- CSSStyleDeclaration item() Method
- Get the first and last item in an array using JavaScript
- How to get the last item of JavaScript object ?
- How to insert an item at the beginning of an array in PHP ?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.