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;
}

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

2. 使用: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;