How to Make the Cursor a Hand When Hovering Over a List Item

The CSS cursor property suggests many types of cursor. It determines the type of a mouse cursor when the mouse pointer is over the element.

Sometimes, on your page, you need to make the cursor a hand when hovering over a list item. For that, you can use the "grab" value of the cursor property.

It is straightforward if you follow the steps described below. Let’s see an example and discuss each part of the code.

Create HTML

  • Place <h2> and <div> elements in the <body> section.
  • Use the <ul> tag which is used for specifying an unordered list. Then, place some <li> tags within the <ul> tag.
<body>
  <h2>W3docs</h2>
  <div>
      A web developer information website, providing tutorials and references related to web development.
  </div>
  <ul>
    <li>Books</li>
    <li>Quizzes</li>
    <li>Snippets</li>
    <li>Tools</li>
    <li>String Functions</li>
  </ul>
</body>

Add CSS

  • Use the text-align property with the "center" value for the <h2> tag.
  • For the <li> tag, set the margin by using the margin property, which creates space around the element.
  • Use the :hover selector for the <li> tags and set the changes that should be made when you hover over the item.
  • Use the cursor property with its "grab" value for indicating that something can be grabbed.
h2 {
  text-align: center;
}

li {
  margin: 5px 5px 15px;
}

li:hover {
  cursor: grab;
}

Let’s see how it works!

Example of making the cursor a hand when hovering over an unordered list item:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h2 {
        text-align: center;
      }
      li {
        margin: 5px 5px 15px;
      }
      li:hover {
        cursor: grab;
      }
    </style>
  </head>
  <body>
    <h2>W3docs</h2>
    <div>
      A web developer information website providing tutorials and references related to web development.
    </div>
    <ul>
      <li>Books</li>
      <li>Quizzes</li>
      <li>Snippets</li>
      <li>Tools</li>
      <li>String Functions</li>
    </ul>
  </body>
</html>

Result of making the cursor a hand

  • Books
  • Quizzes
  • Snippets
  • Tools
  • String Functions

Example of turning the cursor into a hand when hovering over an unordered list item::

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        width: 100%;
      }
      h2 {
        color: #4287f5;
        text-align: center;
      }
      li {
        list-style-type: none;
        padding: 15px;
        color: #ffffff;
      }
      li:nth-child(odd) {
        background-color: #4287f5;
        cursor: grab;
        width: 50%;
      }
      li:nth-child(even) {
        background-color: #b8bcc2;
        cursor: pointer;
        width: 50%;
      }
    </style>
  </head>
  <body>
    <h2>W3 docs</h2>
    <div>
      A web developer information website providing tutorials and references related to web development.
    </div>
    <ul>
      <li>Books</li>
      <li>Quizzes</li>
      <li>Snippets</li>
      <li>Tools</li>
      <li>String Functions</li>
    </ul>
  </body>
</html>

In the example above, we use the :nth-child() selector. It selects and styles elements based on their index and can be specified by a number, a keyword, or a formula. We use the"odd" and "even" keywords and then, we add the list-style-type property with its "none" value. The CSS list-style-type property defines the type of a list item element. The "none" value means that the marker won't be shown.

Example of making the cursor a hand when hovering over an ordered list item:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h2 {
        text-align: center;
      }
      li {
        margin: 5px 5px 15px;
      }
      li:hover {
        cursor: grab;
      }
    </style>
  </head>
  <body>
    <h2>W3docs</h2>
    <div>
      A web developer information website providing tutorials and references related to web development.
    </div>
    <ol>
      <li>Books</li>
      <li>Quizzes</li>
      <li>Snippets</li>
      <li>Tools</li>
      <li>String Functions</li>
    </ol>
  </body>
</html>

Here, we use <ol> tag instead of <ul>. It is used to create an ordered list, which contains elements in a certain sequence.

Let's see one more example.

Example of making the cursor a hand when hovering over an ordered list item with the type attribute:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h2 {
        text-align: center;
      }
      li {
        margin: 5px 5px 15px;
      }
      li:hover {
        cursor: grab;
      }
    </style>
  </head>
  <body>
    <h2>W3docs</h2>
    <div>
      A web developer information website providing tutorials and references related to web development.
    </div>
    <ol type="I">
      <li>Books</li>
      <li>Quizzes</li>
      <li>Snippets</li>
      <li>Tools</li>
      <li>String Functions</li>
    </ol>
  </body>
</html>

In this example, with the <ol> tag we use a type attribute with the I value, which means that roman numbers are used for numbering. The type attribute defines the type of the list marker.