CSS mouse becomes small hand
Change the mouse pointer to a small hand with CSS
In web design, the mouse pointer style is a crucial element that enhances user experience and interactivity. Setting the mouse pointer to a small hand style is a common practice, often used to indicate to users that an element is clickable or interactive. In CSS, we can achieve this effect with simple code.
1. Use the cursor: pointer; property
The simplest method is to use the cursor: pointer; property to set the mouse pointer to a small hand style. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mouse becomes smaller than hand</title>
<style>
.clickable {
cursor: pointer;
}
</style>
</head>
<body>
<div class="clickable">Click here</div>
</body>
</html>
Output:
In the code above, we add a class name .clickable to a <div> element and set the cursor in CSS: The cursor: url(); attribute is used to change the mouse pointer to a small hand when the mouse hovers over the element.
2. Using the cursor: url(); attribute
In addition to using the preset pointer styles, you can also use a custom image as the mouse pointer. This can be achieved using the cursor: url(); attribute. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mouse Hand</title>
<style>
.custom-cursor {
cursor: url('custom-cursor.png'), auto;
}
</style>
</head>
<body>
<div class="custom-cursor">Hover Here</div>
</body>
</html>
Output:
In the above code, we add a class name .custom-cursor to a <div> element and set the cursor: url('custom-cursor.png'), auto; property in CSS. This way, when the mouse hovers over this element, the mouse pointer will change to the custom image style.
3. Using the cursor: alias; attribute
In addition to the small hand style, there are some other pointer styles that can be used. For example, the alias style can be used to indicate that an element is a link or alias. Here’s an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cursor Hand</title>
<style>
.link {
cursor: alias;
}
</style>
</head>
<body>
This is a link
</body>
</html>
Output:
In the above code, we add the class name .link to an element and set the cursor: alias; property in CSS. This way, when the mouse hovers over the link, the mouse pointer changes to the alias style.
4. Using the cursor: not-allowed; Property
Sometimes we need to disable the interactive features of an element. We can use the not-allowed style to indicate that the element is unavailable. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mouse Hand</title>
<style>
.disabled {
cursor: not-allowed;
}
</style>
</head>
<body>
<button class="disabled" disabled>Disable button</button>
</body>
</html>
Output:
In the code above, we add the class name .disabled to a <button> element and set the cursor: not-allowed; property in CSS. This way, when the mouse hovers over the disabled button, the mouse pointer changes to a non-allowed style.
5. Using the cursor: help; Property
The help class can be used to indicate that an element provides help or tooltips. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mouse Hand </title>
<style>
.help {
cursor: help;
}
</style>
</head>
<body>
<span class="help">Hover here for help</span>
</body>
</html>
Output:
In the code above, we add the class name .help to a <span> element and set the cursor: help; property in CSS. This changes the cursor to a help style when the mouse hovers over the element.
6. Using the cursor: move; Property
The move style can be used to indicate that an element can be moved or dragged. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mouse Change to Small Hand</title>
<style>
.draggable {
cursor: move;
}
</style>
</head>
<body>
<div class="draggable" style="width: 100px; height: 100px; background-color: lightblue;">Drag this square</div>
</body>
</html>
Output:
In the code above, we add the class name .draggable to a <div> element and set the cursor: move; property in CSS. This changes the cursor to move when the mouse hovers over the element.
7. Using the cursor: text; Property
The text style can be used to indicate that an element contains text content. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mouse Change to Small Hand</title>
<style>
.text {
cursor: text;
}
</style>
</head>
<body>
<input type="text" class="text" placeholder="Input Text">
</body>
</html>
Output:
In the code above, we add the class name .text to an <input> element and set the cursor: text; property in CSS. This changes the cursor to text when the mouse hovers over the input.
8. Using the cursor: crosshair; Property
The crosshair style can be used to indicate that an element can be selected or drawn on. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mouse Change to Small Hand</title>
<style>
.selectable {
cursor: crosshair;
}
</style>
</head>
<body>
<div class="selectable" style="width: 200px; height: 200px; border: 1px solid black;">Select or draw content</div>
</body>
</html>
Output:
In the code above, we add the class name .selectable to a <div> element and set the cursor: crosshair; property in CSS. This changes the cursor to a crosshair when you hover over the element.
9. Using the cursor: progress; Property
The progress style can be used to indicate that an element is in the process of performing an operation or loading. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mouse Hand</title>
<style>
.loading {
cursor: progress;
}
</style>
</head>
<body>
<button class="loading">Loading...</button>
</body>
</html>
Output:
In the code above, we add the class name .loading to a <button> element and set the cursor: progress; property in CSS. This changes the cursor to a loading cursor when the mouse hovers over the button.
10. Using the cursor: e-resize; Property
In addition to the preset cursor styles, there are also directional cursor styles available. For example, the e-resize style can be used to indicate horizontal stretching or resizing. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mouse Hand Shift</title>
<style>
.resize {
cursor: e-resize;
}
</style>
</head>
<body>
<div class="resize" style="width: 200px; height: 100px; background-color: lightgreen;">Horizontal Stretch</div>
</body>
</html>
Output:
In the code above, we add the class name .resize to a <div> element and set the cursor: e-resize; property in CSS. This causes the mouse pointer to stretch horizontally when the mouse hovers over the right border of the element.
The above is some sample code for setting mouse pointer styles in CSS. Using this code, you can achieve different mouse interaction effects, improving the user experience and interactivity of your web pages.