css与鼠标光标指针相关的属性有哪些?

CSS中与鼠标光标相关的属性以下几个：

  1. cursor: 设置鼠标光标的样式。常见的取值有：

    • auto：浏览器自动决定光标样式。
    • pointer：手型光标，表示链接可点击。
    • default：默认光标样式。
    • text：文本光标，表示可输入文本。
    • move：移动光标，表示可拖动元素。
    • not-allowed：禁止光标，表示不可点击或操作。

  2. :hover伪类选择器：用于选取鼠标悬停在元素上时的样式。可以通过:hover伪类选择器来设置鼠标悬停时的样式。

  3. :active伪类选择器：用于选取鼠标点击元素时的样式。可以通过:active伪类选择器来设置鼠标点击时的样式。

  4. :focus伪类选择器：用于选取具有焦点的元素。可以通过:focus伪类选择器来设置具有焦点时的样式。

  5. pointer-events属性：控制元素是否响应鼠标事件。常见的取值有：

    • auto：元素响应鼠标事件。
    • none：元素不响应鼠标事件。

  6. user-select属性：控制用户是否可以选择元素的内容。常见的取值有：

    • auto：用户可以选择元素的内容。
    • none：用户无法选择元素的内容。




cursor 鼠标指针样式

MDN https://developer.mozilla.org/zh-CN/docs/Web/CSS/cursor

菜鸟教程 CSS cursor 属性 https://www.runoob.com/cssref/pr-class-cursor.html

C语言中文网 CSS cursor（鼠标样式）https://c.biancheng.net/css3/cursor.html

CSS中与鼠标光标指针相关的属性主要是cursor。这个属性用于设置当鼠标指针悬停在某个元素上时显示的光标效果，帮助用户了解他们可以执行的操作。

cursor属性的常见取值包括：

  • default：默认光标，通常是箭头形状。
  • auto：浏览器根据上下文自动选择光标。
  • crosshair：光标呈现为十字线。
  • pointer或hand：光标呈现为指示链接的指针，通常表现为小手形状。
  • move：光标表示对象可以被移动。
  • text：I形光标。
  • vertical-text：垂直I形光标。
  • no-drop：表示元素不能被拖动的光标。
  • not-allowed：表示操作不被允许的光标。
  • help：表示可用的帮助光标，通常是一个问号或一个气球。

此外，cursor属性还有与调整矩形框边缘相关的值，如e-resize、ne-resize、nw-resize、n-resize、se-resize、sw-resize、s-resize和w-resize，这些值分别表示矩形框的边缘可以向特定方向移动的光标。

通过为元素的CSS属性设置合适的cursor值，你可以为用户提供直观的视觉反馈，帮助他们更好地理解和操作网页元素。这不仅可以提高用户体验，还可以增加交互的趣味性。

值描述
url

需使用的自定义光标的 URL。

注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。

default默认光标（通常是一个箭头）
auto默认。浏览器设置的光标。
crosshair光标呈现为十字线。
pointer光标呈现为指示链接的指针（一只手）
move此光标指示某对象可被移动。
e-resize此光标指示矩形框的边缘可被向右（东）移动。
ne-resize此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize此光标指示矩形框的边缘可被向上（北）移动。
se-resize此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize此光标指示矩形框的边缘可被向下移动（南）。
w-resize此光标指示矩形框的边缘可被向左移动（西）。
text此光标指示文本。
wait此光标指示程序正忙（通常是一只表或沙漏）。
help此光标指示可用的帮助（通常是一个问号或一个气球）。




:hover 鼠标悬停伪类选择器

MDN :hover https://developer.mozilla.org/zh-CN/docs/Web/CSS/:hover

菜鸟教程 :hover https://www.runoob.com/cssref/sel-hover.html

:hover是CSS中的一个伪类选择器，用于在鼠标悬停在元素上时应用样式。它可以应用于各种HTML元素，如链接、按钮、列表项等。当鼠标悬停在元素上时，可以改变元素的背景颜色、字体颜色、边框等样式。

下面是两个使用:hover的例子：

  1. 使用:hover改变链接的样式：
a:hover {color: red;text-decoration: underline;
}

这个例子中，当鼠标悬停在链接上时，链接的颜色将变为红色，并且会有下划线。

  1. 使用:hover改变按钮的样式：
button:hover {background-color: blue;color: white;
}

这个例子中，当鼠标悬停在按钮上时，按钮的背景颜色将变为蓝色，字体颜色将变为白色。

在CSS中，:active伪类用于设定元素在被激活状态下的样式。它通常用于设置链接或按钮在被点击时的样式效果。:active伪类只在按下鼠标按钮与释放鼠标按钮之间的短暂瞬间被触发显示。同时，使用键盘的tab键也可以触发:active状态。

下面是一个示例，展示如何使用:active伪类来设置链接的样式：

a:active {color: red;text-decoration: none;
}

上述代码将在链接被点击时将其文字颜色设置为红色，并去除下划线效果。

需要注意的是，:active伪类只在元素处于被激活状态时生效，一旦鼠标按钮释放或者焦点移开，:active样式将不再生效。




:active 鼠标点击伪类选择器

MDN :active https://developer.mozilla.org/zh-CN/docs/Web/CSS/:active

菜鸟教程 :active https://www.runoob.com/cssref/sel-active.html

在CSS中，:active伪类用于设定元素在被激活状态下的样式。它通常用于设置链接或按钮在被点击时的样式效果。:active伪类只在按下鼠标按钮与释放鼠标按钮之间的短暂瞬间被触发显示。同时，使用键盘的tab键也可以触发:active状态。

下面是一个示例，展示如何使用:active伪类来设置链接的样式：

a:active {color: red;text-decoration: none;
}

上述代码将在链接被点击时将其文字颜色设置为红色，并去除下划线效果。

需要注意的是，:active伪类只在元素处于被激活状态时生效，一旦鼠标按钮释放或者焦点移开，:active样式将不再生效。




:focus伪类选择器

MDN :focus https://developer.mozilla.org/zh-CN/docs/Web/CSS/:focus

菜鸟教程 CSS :focus 选择器 https://www.runoob.com/cssref/sel-focus.html

:focus 是一个 CSS 伪类选择器，它用于选择当前获得焦点的元素。当用户在页面上交互，例如点击输入框或选择下拉列表时，这些元素会获得焦点，此时 :focus 伪类选择器就可以被用来应用特定的样式。

例如，假设你有一个输入框，并希望当这个输入框获得焦点时，其边框颜色变为蓝色。你可以这样写 CSS：

input:focus {border: 2px solid blue;
}

这样，每当用户点击或触摸这个输入框，使其获得焦点时，它的边框颜色就会变为蓝色。

除了输入框，其他可以接收焦点的元素，如按钮、链接等，也可以使用 :focus 伪类选择器。

此外，:focus 伪类选择器在提高网站的可访问性方面也非常有用。通过为获得焦点的元素提供清晰的视觉反馈，可以帮助视觉障碍的用户更好地理解和使用网站。

注意：在一些情况下，如移动设备上，某些元素可能不会默认显示 :focus 样式。为了确保在所有情况下都能提供清晰的反馈，有时可能需要使用 JavaScript 或其他技术来增强或触发 :focus 样式。




pointer-events: 对鼠标事件的反应

MDN pointer-events 英文 https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

菜鸟教程 CSS pointer-events 属性 https://www.runoob.com/cssref/css3-pr-pointer-events.html

常用取值 auto 和 none

  • pointer-events: auto; 默认值

    pointer-events:auto;

  • pointer-events: none; 鼠标穿透,使鼠标事件无效

    pointer-events:none;

取值

/* Keyword values */
pointer-events: auto;
pointer-events: none;
pointer-events: visiblePainted; /* SVG only */
pointer-events: visibleFill; /* SVG only */
pointer-events: visibleStroke; /* SVG only */
pointer-events: visible; /* SVG only */
pointer-events: painted; /* SVG only */
pointer-events: fill; /* SVG only */
pointer-events: stroke; /* SVG only */
pointer-events: all; /* SVG only *//* Global values */
pointer-events: inherit;
pointer-events: initial;
pointer-events: revert;
pointer-events: revert-layer;
pointer-events: unset;

pointer-events: none;

pointer-events:none;

css停用元素的鼠标事件可用pointer-events: none;

<button onclick="alert(this.innerHTML);" style="pointer-events:auto;"> style="pointer-events:auto;" </button>
<button onclick="alert(this.innerHTML);" style="pointer-events:none;"> style="pointer-events:none;" </button>
<button onclick="alert(this.innerHTML);" > 没有设置<code>pointer-events</code> </button><style>button{font-size:36px; height:100px;}
</style>

pointer-events: none; 可以实现鼠标穿透

比如 button按钮 上面有个元素挡着

<article style="position:fixed; left:30%; top:20%; translate:-50% -50%; width:300px; height:200px; font-size:20px;"><button onclick="alert(this.innerHTML);" style="position:absolute; z-index:-100; inset:0; font-size:inherit;" >被遮挡<br/>的按钮</button><div style="position:absolute; z-index:-10; inset:0px; ">挡在Button上的div,使得点击不到下面的Button按钮</div>
</article><article style="position:fixed; left:60%; top:20%; translate:-50% -50%; width:300px; height:200px; font-size:20px;"><button onclick="alert(this.innerHTML);" style="position:absolute; z-index:-100; inset:0; font-size:inherit;" >被遮挡<br/>的按钮</button><div style="position:absolute; z-index:-10; inset:0px; pointer-events:none; ">挡在Button上的div,因为设置了<code>pointer-events:none</code>; 所以可以点击到下面的按钮</div>
</article><article style="position:fixed; left:30%; top:60%; translate:-50% -50%; width:300px; height:200px; font-size:20px;"><button onclick="alert(this.innerHTML);" style="position:absolute; z-index:-100; inset:0; font-size:inherit;" >被遮挡<br/>的按钮</button><div style="position:absolute; z-index:-10; inset:0px; pointer-events:auto; ">挡在Button上的div,设置了<code>pointer-events:auto</code>; 如同没设置一样,点击不到下面的按钮</div>
</article><style>code{color:red;}</style>

CSS的pointer-events属性用于控制HTML元素如何响应鼠标和触摸事件，如点击、悬停等。这个属性决定了在何种情况下元素能够成为鼠标或触摸事件的目标。pointer-events属性有多种可能的值，但其中两个最常用的值是none和auto。

  • none：当元素的pointer-events属性设置为none时，该元素将不会成为鼠标或触摸事件的目标。换句话说，用户与这个元素的交互将被忽略，点击或触摸这个元素时，事件会“穿透”到该元素下方的其他元素上。这可以用于创建视觉上的覆盖层，但不影响用户与底层元素的交互。
  • auto：这是pointer-events属性的默认值。当设置为auto时，元素将正常接收并响应鼠标和触摸事件。

例如，你可以使用以下CSS代码来设置元素的pointer-events属性：

.element {pointer-events: none; /* 元素不会对鼠标或触摸事件做出反应 */
}.another-element {pointer-events: auto; /* 元素正常接收并响应鼠标和触摸事件 */
}

需要注意的是，pointer-events属性是一个可继承属性，这意味着如果父元素设置了该属性，而子元素没有设置，那么子元素将继承父元素的pointer-events属性值。

总的来说，pointer-events属性为开发者提供了灵活的方式来控制元素与鼠标和触摸事件的交互，从而可以创建出更丰富、更有趣的用户体验。




user-select 选择文本

MDN user-select https://developer.mozilla.org/zh-CN/docs/Web/CSS/user-select

user-select 是一个 CSS 属性，用于控制用户是否可以选择文本。这个属性对于防止用户复制网站上的内容或保护 UI 元素（如按钮或图标）的文本不被选中非常有用。

user-select 属性有以下可能的值：

  • auto：允许用户选择文本，这是大多数浏览器元素的默认行为。
  • contain: 允许在元素内选择；但是，选区将被限制在该元素的边界之内。
  • none：禁止用户选择文本。
  • text：允许用户选择文本。
  • all：允许用户选择文本以及页面上的其他内容（例如图片或其他可拖动元素）。
  • element：允许用户选择整个元素，而不是元素内的文本。(只有IE和Firefox支持)

例如，如果你想要禁止用户选择某个段落的文本，你可以这样写 CSS：

p {user-select: none;
}

这将使得该段落内的文本无法被鼠标拖动选择。

需要注意的是，user-select 属性在某些浏览器上可能需要使用供应商前缀（vendor prefixes），如 -webkit-（用于 Chrome 和 Safari）、-moz-（用于 Firefox）、-ms-（用于某些版本的 Internet Explorer）等。为了确保跨浏览器的兼容性，你可能需要这样写：

p {-webkit-user-select: none; /* Chrome, Safari, and Opera */-moz-user-select: none; /* Firefox */-ms-user-select: none; /* Internet Explorer/Edge */user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Firefox, Opera, and Safari */
}

尽管 user-select 属性可以防止用户选择文本，但它并不能阻止用户通过其他方式获取页面内容，比如查看页面源代码或使用屏幕阅读器等辅助技术。因此，在保护内容方面，它应被视为一种辅助手段，而不是完全的安全措施。

禁止选择文本 user-select: none;

user-select:none;




























本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/767225.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Acwing算法提高课-DP-数字三角形模型

Acwing算法提高课-DP-数字三角形模型

摘花生 见另一篇文章&#xff1a; Acwing数学与简单DP&#xff08;二&#xff09; 最低通行费 原题链接&#xff1a;https://www.acwing.com/problem/content/1020/ 类似于上面的摘花生&#xff0c;不过摘花生求的是集合的MAX&#xff0c;最低通行费求的是集合的MIN。 但是&am…
阅读更多...
基于Matlab的眼底图像血管分割，Matlab实现

基于Matlab的眼底图像血管分割，Matlab实现

博主简介&#xff1a; 专注、专一于Matlab图像处理学习、交流&#xff0c;matlab图像代码代做/项目合作可以联系&#xff08;QQ:3249726188&#xff09; 个人主页&#xff1a;Matlab_ImagePro-CSDN博客 原则&#xff1a;代码均由本人编写完成&#xff0c;非中介&#xff0c;提供…
阅读更多...
【webView中打开pdf文件，再点击设置切换页面后，再点击返回，则pdf无法正常显示，显示空白？】

【webView中打开pdf文件，再点击设置切换页面后，再点击返回，则pdf无法正常显示，显示空白？】

https://developers.weixin.qq.com/community/develop/doc/000ea83ba5cb58a586feb827c59c00跟这个问题一样 解决办法就是在onshow中奖地址清了重新赋值&#xff0c;就是缓存的问题 <div><web-view :src"pdfurl" :webview-styles"webviewStyles" …
阅读更多...
车道线检测论文:《Ultra Fast Structure-aware Deep Lane Detection》

车道线检测论文:《Ultra Fast Structure-aware Deep Lane Detection》

该论文标题为《Ultra Fast Structure-aware Deep Lane Detection》&#xff0c;作者是浙江大学计算机科学与技术学院的Zequn Qin、Huanyu Wang和Xi Li。论文提出了一种新颖的、简单而有效的车道检测方法&#xff0c;旨在解决具有挑战性场景下的车道检测问题&#xff0c;并实现极…
阅读更多...
借用QStyledItemDelegate 在DataView中创建各种子控件

借用QStyledItemDelegate 在DataView中创建各种子控件

在Model/View 中&#xff0c;二维表格的输入方式可能各种各样&#xff0c;我们需要在单元格嵌入各种类型控件&#xff0c;但是能把各种控件整合一个委托类吗&#xff1f;本文进行了尝试。将创建各种控件的逻辑整合到一个委托类。效果图如下&#xff1a; 本文实现了在DataView 的…
阅读更多...
Android 带html标签文本添加自定义超链接跳转

Android 带html标签文本添加自定义超链接跳转

Android 带html标签文本添加自定义超链接跳转 背景&#xff1a; 在项目开发过程中&#xff0c;需要在用户协议等文本中加入超链接跳转到APP内的其他界面&#xff0c;正常情况下我们都会知道用Html.fromHtml来识别html标签中的超链接&#xff0c;比如<a href"http://www…
阅读更多...
【SpringMVC】知识汇总

【SpringMVC】知识汇总

SpringMVC 短暂回来&#xff0c;有时间就会更新博客 文章目录 SpringMVC前言一、第一章 SpingMVC概述二、SpringMVC常用注解1. Controller注解2. RequestMapping注解3. ResponseBody注解4. RequestParam5. EnableWebMvc注解介绍6. RequestBody注解介绍7. RequestBody与RequestP…
阅读更多...
Echarts功能记录

Echarts功能记录

基础配置 工具箱toolbox 对应功能 案例中使用到的第三方脚本
阅读更多...
SpringBoot 启用 Https，生成 jks 自签证书

SpringBoot 启用 Https，生成 jks 自签证书

使用 Java 提供的工具生成 jks 自签证书 keytool 是 Java Development Kit (JDK) 中的一个工具&#xff0c;用于管理公钥和私钥对以及相关的证书。以下命令用于生成一个密钥对并将其存储在密钥库中&#xff1a; keytool -genkeypair -alias www.example.com -keyalg RSA -key…
阅读更多...
解决Animate.css动画效果无法在浏览器运行问题

解决Animate.css动画效果无法在浏览器运行问题

背景 在开发官方网站的时候&#xff0c;临时更换了电脑&#xff0c;发现原本正常的动画效果突然不动了。 经过 chrome、Microsoft Edge都无法运行。 Animate.css | A cross-browser library of CSS animations. 问题排查 通过审查元素后发现类名是注入并且生效的。 验证 然…
阅读更多...
开源科学可视化软件

开源科学可视化软件

目录 0 参考链接 1 GR 2 VisIt 3 Inviwo 4 Voreen 5 MegaMol 6 ParaView 7 ROOT 8 Mayavi 9 PyQtGraph 10 vedo 11 Glumpy 12 SCIRun 13 Vispy 14 K3D 15 VTK 16 yt 17 Veusz 18 PyVista 18 TTK 20 Ipyvolume 21 Polyscope 22 GLVis 23 3D Slicer …
阅读更多...
【图解物联网】第3章 物联网设备

【图解物联网】第3章 物联网设备

3.1 设备——通向显示世界的接口 3.1.1 为什么要学习设备的相关知识 经过前两章的学习&#xff0c;想必各位读者已经掌握物联网这个词描绘出的世界和用于实现物联网的系统架构了。基于这点&#xff0c;这一章将会为大家介绍在物联网世界中起着核心作用的因素&#xff0c;即设…
阅读更多...
atoi函数（想要彻底了解atoi函数，那么看这一篇就足够了！）

atoi函数（想要彻底了解atoi函数，那么看这一篇就足够了！）

前言&#xff1a;在学习C语言的时候&#xff0c;我们知道每个字符都有其所对应的ASCII码值&#xff0c;当我们使用49来打印字符时&#xff0c;打印出来的就是数字字符 ‘ 1 ’&#xff0c;那么字符能否直接被转换成对应的整型数字呢&#xff1f;答案是当然可以&#xff0c;这时…
阅读更多...
印度洋涡旋统计

印度洋涡旋统计

印度洋涡旋统计 clear;clc;clf;close all; %% 读取涡旋半径、时间范围、经纬度信息，以及涡旋点的经纬度；半径路径和涡旋极性； file2=‘D:\matlab_work\accept_work\涡旋统计的平面分布\eddy_trajectory_2.0exp_19930101_20200307.nc’; time=double(ncread(file2,‘time’)…
阅读更多...
一文搞懂数据链路层

一文搞懂数据链路层

数据链路层 1. 简介2. MAC3. 以太网 1. 简介 &#xff08;1&#xff09;概念 链路(link)是一条无源的点到点的物理线路段&#xff0c;中间没有任何其他的交换结点。 数据链路(data link) 除了物理线路&#xff08;双绞线电缆、同轴电缆、光线等介质&#xff09;外&#xff0…
阅读更多...
2024-03-24 成长-周复盘-责任与能力-事情的推进与落地和完成

2024-03-24 成长-周复盘-责任与能力-事情的推进与落地和完成

摘要: 过于一周发生太多事情&#xff0c;林林总总&#xff0c;有些事情为了避免重蹈覆辙&#xff0c;要进行回溯复盘。 主要集中于做事方式&#xff0c;做事方法&#xff0c;更多的是集中于失败的做事方式。 在认知层面&#xff0c;要通过做事的结果&#xff0c;来反向推导做…
阅读更多...
详细安装步骤：vue.js 三种方式安装(vue-cli)

详细安装步骤：vue.js 三种方式安装(vue-cli)

Vue.js&#xff08;读音 /vjuː/, 类似于 view&#xff09;是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手&#xff0c;还便于与第三方库或既有项目整合。 三种 Vue.js 的安装方法&…
阅读更多...
二进制王国【蓝桥杯算法双周赛】

二进制王国【蓝桥杯算法双周赛】

原题链接:https://www.lanqiao.cn/problems/17035/learning/?contest_id177 #include <bits/stdc.h> using namespace std;bool cmp(const string &x,const string &y) {return xy<yx; }int main() {int n; cin>>n;vector<string> vt(n);for(in…
阅读更多...
Dockerfile优化

Dockerfile优化

使用多阶段构建 go应用程序 # Build stage FROM golang:1.16 AS build WORKDIR /app COPY . . RUN go build -o myapp .# Runtime stage FROM alpine:latest WORKDIR /root/ COPY --frombuild /app/myapp . CMD ["./myapp"]Nodejs应用程序 # Build stage FROM nod…
阅读更多...
matlab 将矩阵写入文件

matlab 将矩阵写入文件

目录 一、概述1、算法概述2、主要函数二、将矩阵写入到文本文件三、将矩阵写入电子表格文件四、将矩阵写入指定的工作表和范围五、将数据追加到电子表格六、将矩阵数据追加到文本文件七、参考链接本文由CSDN点云侠原创，原文链接。如果你不是在点云侠的博客中看到该文章，那么此…
阅读更多...
最新文章

Copyright @ 2022~2023