css 图片 鼠标移上去 手

CSS中有一个非常有趣的特性，那就是可以通过使用图片并结合鼠标的悬浮事件，让图片变得更加生动。一般用于网站的美化效果。

// CSS代码
.hand {
  cursor: pointer;
}

.hand:hover {
  /* 设置手型图案 */
  background-image: url('手型图片路径');
  /* 调整手型大小 */
  width: 30px;
  height: 30px;
}

上述代码我们使用了两个CSS属性，一个是cursor属性，用来设置鼠标移动到该元素上时使用的指针样式，为了增加趣味性我们将其设置为手型的图标；另外一个是:hover伪类，该伪类表示当鼠标移动到该元素上时所需要执行的样式。在本例中，我们为元素设置了背景图片，并在鼠标移动到元素上时修改了该图片和相应的大小。

而手型图案，可以通过在线的素材库或是自己通过设计得到。这种效果可以用于交互性比较大的网站，例如游戏平台、购物网站等。这样的做法可以使用户更加舒适、便捷地进行各种操作，提升了用户体验。