cursor: not-allowed

zpjing~.~

于 2024-08-19 14:59:41 发布

阅读量173

点赞数 5

文章标签： css

本文链接：https://blog.csdn.net/u010865136/article/details/141325637

版权

.disable {
  opacity: 0.3;
  cursor: not-allowed;
}

在 CSS 中，cursor: not-allowed; 用于设置光标样式，表示某个操作或元素当前不可用。通常用于显示用户不能与某个元素进行交互的状态。

示例

以下是一些常见的示例，展示如何在网页上使用 cursor: not-allowed;：

1. 禁用按钮

当按钮被禁用时，通常会设置 cursor: not-allowed; 来告诉用户按钮当前不可用：

<!DOCTYPE html> <html lang="en"> 
<head> <meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<style>
 .disabled-button { 
cursor: not-allowed; 
opacity: 0.5; /* 可选的样式，显示按钮被禁用 */
 } </style>
 </head> 
<body>
 <button class="disabled-button" disabled>Disabled Button</button>
 </body>
 </html>

2. 禁用链接

虽然禁用链接本身不是标准的做法，但可以使用 cursor: not-allowed; 来表示链接不可点击：

<!DOCTYPE html> 
<html lang="en"> 
<head>
 <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<style>
 .disabled-link 
{ cursor: not-allowed; color: grey; /* 可选的样式，显示链接不可用 */
 text-decoration: none; /* 可选的样式 */ 
} 
</style>
 </head>
 <body> 
<a href="#" class="disabled-link" onclick="return false;">Disabled Link</a> 
</body> 
</html>

3. 禁用表单字段

可以将 cursor: not-allowed; 应用到禁用的表单字段：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<style> 
.disabled-field 
{ 
cursor: not-allowed;
 background-color: #f0f0f0; /* 可选的样式，显示字段被禁用 */ 
} 
</style>
 </head> 
<body> 
<input type="text" class="disabled-field" value="Disabled Field" disabled> 
</body>
 </html>

注意事项

视觉效果: cursor: not-allowed; 通常与其他样式（如 opacity 或 background-color 的更改）一起使用，以清楚地表明元素的状态。
交互性: cursor: not-allowed; 不会影响元素的实际交互性，确保在使用它时同时禁用交互行为（例如，使用 disabled 属性或 pointer-events: none;）。

通过这些示例，你可以确保用户能够清楚地知道哪些元素当前不可操作。