html实现鼠标点击边框切换图片

您可以在CSS中使用:hover伪类来更改鼠标悬停时的样式，然后使用JavaScript代码来更改图像。以下是一个实现此效果的示例代码：

HTML代码：

<div class="image">
  <img src="path/to/image1.jpg" class="border" onclick="changeImage('path/to/image1.jpg')" />
  <img src="path/to/image2.jpg" class="border" onclick="changeImage('path/to/image2.jpg')" />
  <img src="path/to/image3.jpg" class="border" onclick="changeImage('path/to/image3.jpg')" />
</div>

CSS代码：

.image {
  display: flex;
  justify-content: center;
  align-items: center;
}

.border {
  border: 3px solid black;
  margin: 5px;
}

.border:hover {
  border: 3px solid red;
  cursor: pointer;
}

JavaScript代码：

function changeImage(src) {
  var image = document.querySelector('.image img');
  image.src = src;
}

在这个示例中，我们为每个图片元素添加了一个onclick属性，用于在单击时调用changeImage函数，并传递要显示的图像的路径。changeImage函数将新图像的路径作为参数，并将其分配给图像元素的src属性，从而更改当前显示的图像。