by Sai gowtham

Changing cursor to hand with CSS

Changing cursor to hand with CSS

In this tutorial, we are going to learn about how to change the cursor to hand when a user hovers over an item/html element using the cursor CSS property.

cursor

In CSS, we have a cursor property which helps us to change the different types of a cursor when a user hovers over an html element.

Changing cursor to a hand

To change the cursor to a hand, we need to add cursor property with a value pointer to the element css selector.

Example:

Html

<ul>
  <li>Google</li>
  <li>Yahoo</li>
</ul>

Css

li:hover{
  cursor:pointer
}

Top Udemy Courses

JavaScript - The Complete Guide 2020 (Beginner + Advanced)
JavaScript - The Complete Guide 2020 (Beginner + Advanced)
26,545 students enrolled
52 hours of video content
View Course
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
221,520 students enrolled
44 hours of video content
View Course
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
114,575 students enrolled
21 hours of video content
View Course