css怎么设置鼠标手势？

1）、div{ cursor:default }默认正常鼠标指针

2）、div{ cursor:hand }和div{ cursor:text } 文本选择效果

3）、div{ cursor:move } 移动选择效果

4）、div{ cursor:pointer } 手指形状 链接选择效果

5）、div{ cursor:url(url图片地址) }设置对象为图片

2、cursor样式效果图css cursor鼠标光标指针样式图鼠标指针说明

cursor设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

4、布局结构

p { cursor: text} /* css注释： 设置鼠标移动到html p对象时鼠标变为文本选择样式 */

a { cursor: pointer} /* css注释： 设置鼠标移动到a超链接对象时鼠标变为手指形状（链接选择） */

body { cursor: url("小图片地址")} /* 设置鼠标指针默认为一个小图片 */

扩展阅读：css a、css a link、a hover、css超链接样式鼠标指针样式控制设置是比较常用的，

如日常我们在DIV+CSS布局时候，我们希望鼠标指向某个局部span标签对象时候，鼠标指针光标就变为手指状态，这个时候我们就对对象span设置cursor: pointer即可。以上我们图例展示常用的鼠标光标形状与css单词，希望布局时候更加自身需要选择设置鼠标指针样式。需要注意是，光标切记勿滥用，也不要轻易设置自定义图片为鼠标样式这样会将网页造成复杂与不符合用户体验感觉，切记光标慎用。

CSS  touch-action 属性：指定某个给定的区域是否允许用户 *** 作，以及如何响应用户 *** 作 （比如浏览器自带的划动、缩放等）。

touch-action 属性可以被指定为:

1、任何一个关键字 auto、none、manipulation，或

2、零或任何一个关键字 pan-x、pan-left、pan-right，加零或任何一个关键字 pan-y、pan-up、pan-down，加可选关键字 pinch-zoom.

1、auto

当触控事件发生在元素上时，由浏览器来决定进行哪些 *** 作，比如对viewport进行平滑、缩放等。

2、none

当触控事件发生在元素上时，不进行任何 *** 作。

3、pan-x

启用单指水平平移手势。可以与 pan-y 、pan-up、pan-down 和／或 pinch-zoom 组合使用。

4、pan-y

启用单指垂直平移手势。可以与 pan-x 、pan-left 、pan-right 和／或 pinch-zoom 组合使用。

5、manipulation

浏览器只允许进行滚动和持续缩放 *** 作。任何其它被auto值支持的行为不被支持。启用平移和缩小缩放手势，但禁用其他非标准手势，例如双击以进行缩放。 禁用双击可缩放功能可减少浏览器在用户点击屏幕时延迟生成点击事件的需要。 这是“pan-x pan-y pinch-zoom”（为了兼容性本身仍然有效）的别名。

6、pan-left, pan-right,pan-up,pan-down

启用以指定方向滚动开始的单指手势。 一旦滚动开始，方向可能仍然相反。 请注意，滚动“向上”（pan-up）意味着用户正在将其手指向下拖动到屏幕表面上，同样 pan-left 表示用户将其手指向右拖动。 多个方向可以组合，除非有更简单的表示（例如，“pan-left pan-right”无效，因为“pan-x”更简单，而“pan-left pan-down”有效）。

7、pinch-zoom

启用多手指平移和缩放页面。 这可以与任何平移值组合。

默认情况下，平移（滚动）和缩放手势由浏览器专门处理。 使用 Pointer_events 的应用程序将在浏览器开始处理触摸手势时收到一个 pointercancel 事件。 通过明确指定浏览器应该处理哪些手势，应用程序可以在 pointermove 和 pointerup 监听器中为其余的手势提供自己的行为。 使用 Touch_events 的应用程序通过调用 preventDefault() 禁用浏览器处理手势，但也应使用触摸 *** 作确保浏览器在调用任何事件侦听器之前，了解应用程序的意图。

当手势开始时，浏览器与触摸的元素及其所有祖先的触摸动作值相交直到一个实现手势（换句话说，第一个包含滚动元素）的触摸动作值。 这意味着在实践中，触摸动作通常仅适用于具有某些自定义行为的单个元素，而无需在该元素的任何后代上明确指定触摸动作。 手势开始之后，触摸动作值的更改将不会对当前手势的行为产生任何影响。

在CSS中有一个cursor方法可以改变鼠标指针状态图标，我们可以利用这个方法来达到移动指针到h1标签上的时候鼠标指针变成小手的状态效果。如下代码：

以上例子中cursor的值pointer表示小手状态，cursor的属性的值有以下类型，不同值可以实现不同的指针效果。

---