在css中怎样让鼠标在图片上出现一个方框跟着在鼠标停留的位置

您可以使用CSS中的:hover伪类和transform属性来实现这个效果。具体步骤如下：

1. 首先，在CSS中，给图片添加一个:hover伪类来设置鼠标悬停时的样式。

img:hover {
  transform: scale(1.2);
}

2. 接着，在:hover伪类中添加transform属性，设置scale值来放大图片。这里的scale值可以根据实际情况自行调整。

img:hover {
  transform: scale(1.2);
}

3. 最后，在:hover伪类中添加一个伪元素，使用绝对定位（position:absolute）来创建一个跟随鼠标移动的方框，使用transform属性来调整方框的位置。

img:hover::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  border: 2px solid #000;
  box-sizing: border-box;
  pointer-events: none; /* 使鼠标事件能够穿透伪元素到达图片元素 */
}

这里使用::after伪元素来创建方框，使用translate()函数和top、left属性来将方框居中在鼠标位置，使用width、height、border、box-sizing属性来设置方框的大小和边框样式，使用pointer-events属性来使鼠标事件能够穿透伪元素到达图片元素。

完整的代码示例如下：

img:hover {
  transform: scale(1.2);
}
img:hover::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  border: 2px solid #000;
  box-sizing: border-box;
  pointer-events: none;
}

希望这个解答能够帮到您！