Appearance
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 pointer value of the cursor property. Note: cursor: pointer displays a pointing hand for clickable elements, while cursor: grab is used for dragging.
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.
How to use HTML <h2>, <body>, <div>, <ul> and <li> tags?
html
<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 "pointer" value to indicate that the item is clickable.
How to style an HTML element using CSS text-align, margin, and cursor properties on hover?
css
h2 {
text-align: center;
}
li {
margin: 5px 5px 15px;
}
li:hover {
cursor: pointer;
}Let’s see how it works!
Example of making the cursor a hand when hovering over an unordered list item:
An Example of How to Make the Cursor a Hand When a User Hovers Over a List Item
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h2 {
text-align: center;
}
li {
margin: 5px 5px 15px;
}
li:hover {
cursor: pointer;
}
</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:
An Example of How to Make the Cursor a Hand When a User Hovers Over a List Item Using the :nth-child() Selector
html
<!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: pointer;
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:
An Example of How to Make the Cursor a Hand When a User Hovers Over a List Item of <ol> Tag
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h2 {
text-align: center;
}
li {
margin: 5px 5px 15px;
}
li:hover {
cursor: pointer;
}
</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:
An Example of How to Make the Cursor a Hand When a User Hovers Over a List Item of <ol> Tag with the type Attribute
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h2 {
text-align: center;
}
li {
margin: 5px 5px 15px;
}
li:hover {
cursor: pointer;
}
</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.