X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

How to Make the Cursor Hand When a User Hovers Over a List Item

CSS cursor property suggests many versions of a cursor. The cursor property is used to define the type of mouse cursor when the mouse pointer is over the element.

Sometimes, on your page, you need to make the cursor hand when you hover over a list item. You can use the "grab" keyword of the cursor property to make it hand when you hover over the list of items.

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

1. Create HTML

  • Place <h2> tag in the <body> section. Write some content in it.
  • Create a <div> tag and write some content in it.
  • Place the <ul> tag which is used for specifying an unordered list, which groups a collection of items having no numerical order.
  • Place some <li> tags in the <ul> tag with some contents.
<body>
    <h2>W3docs</h2>
    <div>A web developer information website, with tutorials and references relating to web development.</div>
    <ul>
      <li>Books</li>
      <li>Quizzes</li>
      <li>Snippets</li>
      <li>Tools</li>
      <li>String Functions</li>
    </ul>
  </body>

2. Add CSS

  • Use the text-align property with the "center" value for the <h2> tag.
  • For the <li> tag set the margin by using margin property which creates a 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 cursor property and the "grab" value for indicating that something can be grabbed.
h2{ 
      text-align:center; 
      } 
      li{
      margin:5px 5px 15px;
      }
      li:hover{ 
      cursor: grab; 
      }

Let’s bring the code parts together and see how it works!

Here is the result of our code

<!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, with tutorials and references relating to web development.</div>
    <ul>
      <li>Books</li>
      <li>Quizzes</li>
      <li>Snippets</li>
      <li>Tools</li>
      <li>String Functions</li>
    </ul>
  </body>
</html>

Let’s see another example.

Example

<!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, with tutorials and references relating 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 this example, in the part of the CSS, 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. In this example, "odd" and "even" keywords are used. We use list-style-type property with the "none" value. CSS list-style-type property defines the type of a list item element. "None" value means that the marker won't be shown.

Example

<!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, with tutorials and references relating to web development.</div>
    <ol>
      <li>Books</li>
      <li>Quizzes</li>
      <li>Snippets</li>
      <li>Tools</li>
      <li>String Functions</li>
    </ol>
  </body>
</html>

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

Example

<!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, with tutorials and references relating 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> the tag we use "type" attribute with the "I" value, which means that the numbering elements are roman capital numbers. "Type" attribute defines the type of the list marker.


Do you find this helpful?

Related articles