CSS cursor 禁止|极客教程

CSS cursor 禁止

在网页开发中，我们经常会使用 CSS 来设置鼠标指针的样式，以提升用户体验。然而，有时候我们也需要禁止用户改变鼠标指针的样式，这时就需要使用 cursor: none; 来实现。本文将详细介绍如何在 CSS 中禁止鼠标指针的改变。

1. 使用 `cursor: none;` 禁止鼠标指针

通过设置 cursor: none; 样式，可以禁止鼠标指针在指定元素上显示。下面是一个简单的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>禁止鼠标指针示例</title>
<style>
    .no-cursor {
        cursor: none;
    }
</style>
</head>
<body>
    <div class="no-cursor">这是一个禁止鼠标指针的元素</div>
</body>
</html>

Output:

CSS cursor 禁止

在上面的示例中，当鼠标移动到包含类名为 no-cursor 的 div 元素上时，鼠标指针将不会显示。

2. 使用 JavaScript 动态控制鼠标指针

除了在 CSS 中设置 cursor: none; 外，我们还可以使用 JavaScript 动态控制鼠标指针的显示。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态控制鼠标指针示例</title>
<style>
    .no-cursor {
        cursor: none;
    }
</style>
<script>
    document.addEventListener('mousemove', function(e) {
        if (e.target.classList.contains('no-cursor')) {
            document.body.style.cursor = 'none';
        } else {
            document.body.style.cursor = 'auto';
        }
    });
</script>
</head>
<body>
    <div class="no-cursor">这是一个禁止鼠标指针的元素</div>
</body>
</html>

Output:

CSS cursor 禁止

在上面的示例中，当鼠标移动到包含类名为 no-cursor 的元素上时，鼠标指针将不会显示；否则，鼠标指针将显示为默认样式。

3. 使用 `pointer-events: none;` 禁止鼠标事件

除了禁止鼠标指针的显示外，我们还可以使用 pointer-events: none; 样式来禁止鼠标事件的触发。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>禁止鼠标事件示例</title>
<style>
    .no-events {
        pointer-events: none;
    }
</style>
</head>
<body>
    <button class="no-events">禁止点击的按钮</button>
</body>
</html>

Output:

CSS cursor 禁止

在上面的示例中，当鼠标点击包含类名为 no-events 的按钮时，按钮将不会触发点击事件。

4. 使用 `user-select: none;` 禁止文本选择

有时候我们希望禁止用户选择页面上的文本，可以使用 user-select: none; 样式来实现。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>禁止文本选择示例</title>
<style>
    .no-select {
        user-select: none;
    }
</style>
</head>
<body>
    <p class="no-select">这是一个禁止选择文本的段落</p>
</body>
</html>

Output:

CSS cursor 禁止

在上面的示例中，当用户尝试选择包含类名为 no-select 的段落中的文本时，文本将不会被选中。

5. 使用 `resize: none;` 禁止元素调整大小

有时候我们希望禁止用户调整页面上的元素大小，可以使用 resize: none; 样式来实现。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>禁止调整大小示例</title>
<style>
    .no-resize {
        resize: none;
    }
</style>
</head>
<body>
    <textarea class="no-resize">这是一个禁止调整大小的文本框</textarea>
</body>
</html>

Output:

CSS cursor 禁止

在上面的示例中，当用户尝试调整包含类名为 no-resize 的文本框大小时，文本框将不会改变大小。

6. 使用 `touch-action: none;` 禁止触摸事件

在移动端开发中，有时候我们希望禁止触摸事件的触发，可以使用 touch-action: none; 样式来实现。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>禁止触摸事件示例</title>
<style>
    .no-touch {
        touch-action: none;
    }
</style>
</head>
<body>
    <div class="no-touch">这是一个禁止触摸事件的元素</div>
</body>
</html>

Output:

CSS cursor 禁止

在上面的示例中，当用户在包含类名为 no-touch 的元素上进行触摸操作时，将不会触发任何触摸事件。

7. 使用 `overflow: hidden;` 禁止滚动条

有时候我们希望禁止页面出现滚动条，可以使用 overflow: hidden; 样式来实现。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>禁止滚动条示例</title>
<style>
    body {
        overflow: hidden;
    }
</style>
</head>
<body>
    <p>这是一个禁止滚动条的页面</p>
</body>
</html>

Output:

CSS cursor 禁止

在上面的示例中，页面将不会出现滚动条，用户无法滚动页面内容。

8. 使用 `touch-action: pan-y;` 禁止垂直滚动

在移动端开发中，有时候我们希望禁止页面垂直滚动，可以使用 touch-action: pan-y; 样式来实现。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>禁止垂直滚动示例</title>
<style>
    body {
        touch-action: pan-y;
    }
</style>
</head>
<body>
    <p>这是一个禁止垂直滚动的页面</p>
</body>
</html>

Output:

CSS cursor 禁止

在上面的示例中，用户无法通过垂直滚动手势来滚动页面内容。

9. 使用 `touch-action: pan-x;` 禁止水平滚动

在移动端开发中，有时候我们希望禁止页面水平滚动，可以使用 touch-action: pan-x; 样式来实现。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>禁止水平滚动示例</title>
<style>
    body {
        touch-action: pan-x;
    }
</style>
</head>
<body>
    <p>这是一个禁止水平滚动的页面</p>
</body>
</html>

Output:

CSS cursor 禁止

在上面的示例中，用户无法通过水平滚动手势来滚动页面内容。

10. 使用 `pointer-events: none;` 禁止鼠标事件

除了在特定元素上使用 pointer-events: none; 来禁止鼠标事件外，我们也可以在整个页面上使用该样式来禁止所有鼠标事件的触发。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>禁止所有鼠标事件示例</title>
<style>
    body {
        pointer-events: none;
    }
</style>
</head>
<body>
    <p>这是一个禁止所有鼠标事件的页面</p>
</body>
</html>

Output:

CSS cursor 禁止