CSS鼠标变小手|极客教程

CSS鼠标变小手

在网页设计中，鼠标指针的样式是一个很重要的元素，可以增强用户体验和交互性。其中，将鼠标指针设置为小手样式是常见的操作，通常用于提示用户某个元素可以点击或者具有交互功能。在CSS中，我们可以通过简单的代码来实现这一效果。

1. 使用`cursor: pointer;`属性

最简单的方法是使用cursor: pointer;属性来将鼠标指针设置为小手样式。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鼠标变小手</title>
<style>
    .clickable {
        cursor: pointer;
    }
</style>
</head>
<body>
    <div class="clickable">点击这里</div>
</body>
</html>

Output:

CSS鼠标变小手

在上面的代码中，我们给一个<div>元素添加了一个类名.clickable，并在CSS中设置了cursor: pointer;属性，这样当鼠标悬停在这个元素上时，鼠标指针就会变成小手样式。

2. 使用`cursor: url();`属性

除了使用预设的指针样式外，我们还可以使用自定义的图片来作为鼠标指针。这可以通过cursor: url();属性来实现。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鼠标变小手</title>
<style>
    .custom-cursor {
        cursor: url('custom-cursor.png'), auto;
    }
</style>
</head>
<body>
    <div class="custom-cursor">悬停在这里</div>
</body>
</html>

Output:

CSS鼠标变小手

在上面的代码中，我们给一个<div>元素添加了一个类名.custom-cursor，并在CSS中设置了cursor: url('custom-cursor.png'), auto;属性，这样当鼠标悬停在这个元素上时，鼠标指针就会变成自定义的图片样式。

3. 使用`cursor: alias;`属性

除了小手样式外，还有一些其他的指针样式可以使用。例如，alias样式可以用来表示某个元素是一个链接或者别名。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鼠标变小手</title>
<style>
    .link {
        cursor: alias;
    }
</style>
</head>
<body>
    <a href="#" class="link">这是一个链接</a>
</body>
</html>

Output:

CSS鼠标变小手

在上面的代码中，我们给一个<a>元素添加了一个类名.link，并在CSS中设置了cursor: alias;属性，这样当鼠标悬停在这个链接上时，鼠标指针就会变成别名样式。

4. 使用`cursor: not-allowed;`属性

有时候我们需要禁用某个元素的交互功能，可以使用not-allowed样式来表示该元素不可用。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鼠标变小手</title>
<style>
    .disabled {
        cursor: not-allowed;
    }
</style>
</head>
<body>
    <button class="disabled" disabled>禁用按钮</button>
</body>
</html>

Output:

CSS鼠标变小手

在上面的代码中，我们给一个<button>元素添加了一个类名.disabled，并在CSS中设置了cursor: not-allowed;属性，这样当鼠标悬停在这个禁用的按钮上时，鼠标指针就会变成不允许样式。

5. 使用`cursor: help;`属性

help样式可以用来表示某个元素提供帮助或者提示信息。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鼠标变小手</title>
<style>
    .help {
        cursor: help;
    }
</style>
</head>
<body>
    <span class="help">悬停在这里以获取帮助</span>
</body>
</html>

Output:

CSS鼠标变小手

在上面的代码中，我们给一个<span>元素添加了一个类名.help，并在CSS中设置了cursor: help;属性，这样当鼠标悬停在这个元素上时，鼠标指针就会变成帮助样式。

6. 使用`cursor: move;`属性

move样式可以用来表示某个元素可以移动或者拖动。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鼠标变小手</title>
<style>
    .draggable {
        cursor: move;
    }
</style>
</head>
<body>
    <div class="draggable" style="width: 100px; height: 100px; background-color: lightblue;">拖动这个方块</div>
</body>
</html>

Output:

CSS鼠标变小手

在上面的代码中，我们给一个<div>元素添加了一个类名.draggable，并在CSS中设置了cursor: move;属性，这样当鼠标悬停在这个元素上时，鼠标指针就会变成移动样式。

7. 使用`cursor: text;`属性

text样式可以用来表示某个元素包含文本内容。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鼠标变小手</title>
<style>
    .text {
        cursor: text;
    }
</style>
</head>
<body>
    <input type="text" class="text" placeholder="输入文本">
</body>
</html>

Output:

CSS鼠标变小手

在上面的代码中，我们给一个<input>元素添加了一个类名.text，并在CSS中设置了cursor: text;属性，这样当鼠标悬停在这个输入框上时，鼠标指针就会变成文本样式。

8. 使用`cursor: crosshair;`属性

crosshair样式可以用来表示某个元素可以进行选择或者绘制。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鼠标变小手</title>
<style>
    .selectable {
        cursor: crosshair;
    }
</style>
</head>
<body>
    <div class="selectable" style="width: 200px; height: 200px; border: 1px solid black;">选择或绘制内容</div>
</body>
</html>

Output:

CSS鼠标变小手

在上面的代码中，我们给一个<div>元素添加了一个类名.selectable，并在CSS中设置了cursor: crosshair;属性，这样当鼠标悬停在这个元素上时，鼠标指针就会变成十字样式。

9. 使用`cursor: progress;`属性

progress样式可以用来表示某个元素正在进行某个操作或者加载中。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鼠标变小手</title>
<style>
    .loading {
        cursor: progress;
    }
</style>
</head>
<body>
    <button class="loading">加载中...</button>
</body>
</html>

Output:

CSS鼠标变小手

在上面的代码中，我们给一个<button>元素添加了一个类名.loading，并在CSS中设置了cursor: progress;属性，这样当鼠标悬停在这个按钮上时，鼠标指针就会变成加载中样式。

10. 使用`cursor: e-resize;`属性

除了预设的指针样式外，还有一些方向性的指针样式可以使用。例如，e-resize样式可以用来表示水平拉伸或者调整大小。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鼠标变小手</title>
<style>
    .resize {
        cursor: e-resize;
    }
</style>
</head>
<body>
    <div class="resize" style="width: 200px; height: 100px; background-color: lightgreen;">水平拉伸</div>
</body>
</html>

Output:

CSS鼠标变小手