极客教程CSS cursor pointer
在网页设计中，鼠标指针是用户与网页之间的重要交互方式之一。通过设置不同的鼠标指针样式，可以让用户更直观地了解当前鼠标所处的状态，提升用户体验。其中，cursor: pointer 是常用的一种样式，表示鼠标指针在该元素上时会变为手型，提示用户该元素可点击。
基本用法
在 CSS 中，通过设置 cursor: pointer 可以将鼠标指针样式设置为手型。下面是一个简单的示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS cursor pointer</title>
<style>
.btn {
cursor: pointer;
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
}
</style>
</head>
<body>
<button class="btn">Click me</button>
</body>
</html>
Output:
在上面的示例中，我们给一个按钮添加了 cursor: pointer 样式，当鼠标悬停在按钮上时，鼠标指针会变为手型。
示例代码
1. 基本用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS cursor pointer</title>
<style>
.btn {
cursor: pointer;
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
}
</style>
</head>
<body>
<button class="btn">Click me</button>
</body>
</html>
Output:
2. 改变鼠标指针样式
除了 pointer，CSS 还提供了其他一些常用的鼠标指针样式，如 default、help、wait 等。下面是一个示例代码，演示如何改变鼠标指针样式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS cursor pointer</title>
<style>
.custom-cursor {
cursor: help;
}
</style>
</head>
<body>
<div class="custom-cursor">Hover over me</div>
</body>
</html>
Output:
在上面的示例中，我们将鼠标指针样式设置为 help，当鼠标悬停在元素上时，鼠标指针会变为问号形状。
3. 鼠标指针样式继承
子元素会继承父元素的鼠标指针样式。下面是一个示例代码，演示鼠标指针样式的继承：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS cursor pointer</title>
<style>
.parent {
cursor: pointer;
}
</style>
</head>
<body>
<div class="parent">
<div>Child element</div>
</div>
</body>
</html>
Output:
在上面的示例中，父元素 .parent 设置了 cursor: pointer 样式，子元素 div 会继承父元素的鼠标指针样式。
4. 鼠标指针样式优先级
当多个元素设置了不同的鼠标指针样式时，样式优先级遵循 CSS 的规则。下面是一个示例代码，演示鼠标指针样式的优先级：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS cursor pointer</title>
<style>
.parent {
cursor: pointer;
}
.child {
cursor: help;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">Child element</div>
</div>
</body>
</html>
Output:
在上面的示例中，父元素 .parent 设置了 cursor: pointer 样式，子元素 .child 设置了 cursor: help 样式，子元素的样式会覆盖父元素的样式。
5. 鼠标指针样式在链接中的应用
在网页设计中，链接是用户与网页之间最常见的交互方式之一。通过设置链接的鼠标指针样式，可以让用户更直观地了解链接的可点击性。下面是一个示例代码，演示链接的鼠标指针样式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS cursor pointer</title>
<style>
a {
cursor: pointer;
color: #007bff;
text-decoration: none;
}
</style>
</head>
<body>
<a href="#">Click me</a>
</body>
</html>
Output:
在上面的示例中，我们给链接 a 添加了 cursor: pointer 样式，当鼠标悬停在链接上时，鼠标指针会变为手型。
6. 鼠标指针样式在按钮中的应用
按钮是网页中常见的交互元素之一，通过设置按钮的鼠标指针样式，可以让用户更直观地了解按钮的可点击性。下面是一个示例代码，演示按钮的鼠标指针样式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS cursor pointer</title>
<style>
.btn {
cursor: pointer;
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
}
</style>
</head>
<body>
<button class="btn">Click me</button>
</body>
</html>
Output:
在上面的示例中，我们给按钮 .btn 添加了 cursor: pointer 样式，当鼠标悬停在按钮上时，鼠标指针会变为手型。
7. 鼠标指针样式在图标中的应用
图标是网页设计中常用的元素之一，通过设置图标的鼠标指针样式，可以让用户更直观地了解图标的可点击性。下面是一个示例代码，演示图标的鼠标指针样式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS cursor pointer</title>
<style>
.icon {
cursor: pointer;
font-size: 24px;
color: #007bff;
}
</style>
</head>
<body>
<i class="icon">Icon</i>
</body>
</html>
Output:
在上面的示例中，我们给图标 .icon 添加了 cursor: pointer 样式，当鼠标悬停在图标上时，鼠标指针会变为手型。
8. 鼠标指针样式在图片中的应用
图片是网页设计中常用的元素之一，通过设置图片的鼠标指针样式，可以让用户更直观地了解图片的可点击性。下面是一个示例代码，演示图片的鼠标指针样式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS cursor pointer</title>
<style>
.image {
cursor: pointer;
}
</style>
</head>
<body>
<img src="https://www.geek-docs.com/image.jpg" alt="Image" class="image">
</body>
</html>
Output:
在上面的示例中，我们给图片 .image 添加了 cursor: pointer 样式，当鼠标悬停在图片上时，鼠标指针会变为手型。
9. 鼠标指针样式在表格中的应用
表格是网页设计中常用的元素之一，通过设置表格的鼠标指针样式，可以让用户更直观地了解表格的可交互性。下面是一个示例代码，演示表格的鼠标指针样式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS cursor pointer</title>
<style>
table {
cursor: pointer;
border-collapse: collapse;
}
th, td {
border: 1px solid #ccc;
padding: 5px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
</body>
</html>
Output:
在上面的示例中，我们给表格 table 添加了 cursor: pointer 样式，当鼠标悬停在表格上时，鼠标指针会变为手型。
10. 鼠标指针样式在输入框中的应用
输入框是网页设计中常用的交互元素之一，通过设置输入框的鼠标指针样式，可以让用户更直观地了解输入框的可编辑性。下面是一个示例代码，演示输入框的鼠标指针样式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS cursor pointer</title>
<style>
input {
cursor: text;
padding: 5px;
border: 1px solid #ccc;
border-radius: 5px;
}
</style>
</head>
<body>
<input type="text" placeholder="Enter text">
</body>
</html>
Output:
在上面的示例中，我们给输入框 input 添加了 cursor: text 样式，当鼠标悬停在输入框上时，鼠标指针会变为文本输入样式。