鼠标悬停图片产生边框的效果实现

关于“鼠标悬停图片产生边框的效果实现”，以下是我的攻略:

实现方法

实现“鼠标悬停图片产生边框的效果”的方法有多种。下面我们介绍两种常用方法：

方法一：使用CSS的:hover伪类

在HTML中，为图片添加一个class，然后使用CSS中:hover伪类为该class添加一个边框样式即可。具体代码如下：

.img-border:hover {
  border: 1px solid #000;
}

其中，.img-border为图片的class，1px solid #000 则是所添加的边框样式（1px宽，黑色）。

方法二：使用JavaScript

如果希望悬停效果更加丰富，如图片上的文字和图标的变化，可以使用JavaScript实现。具体步骤如下：

1. 给图片元素添加一个事件监听器，当鼠标进入图片时，触发回调函数。

2. 在回调函数中，改变图片的样式和内容。

下面是一些实际代码片段，帮助你更好地理解：

const img = document.querySelector(".img-border");

img.addEventListener("mouseenter", () => {
  img.style.boxShadow = "0px 0px 10px rgba(0,0,0,.4)";
  img.querySelector("p").style.color = "white";
  img.querySelector("i").classList.add("fa-heart");
});

img.addEventListener("mouseleave", () => {
  img.style.boxShadow = "none";
  img.querySelector("p").style.color = "black";
  img.querySelector("i").classList.remove("fa-heart");
});

上面实现的效果是，当鼠标进入图片时，给图片添加一个box-shadow样式（黑色半透明），并改变图片中的一些文字和图标（如把p标签的颜色改为白色，为i标签添加一个fa-heart的class）；当鼠标移出图片时，恢复原始样式。

示例说明

以下是两个示例，演示了使用CSS的:hover伪类和JavaScript分别实现“鼠标悬停图片产生边框的效果”的效果：

示例一：使用CSS实现的鼠标悬停效果

<!-- HTML代码 -->
<div class="img-box">
  <img class="img-border" src="sample.jpg" alt="示例图片">
</div>

/* CSS代码 */
.img-border:hover {
  border: 2px solid #000;
  box-sizing: border-box;
}

在鼠标悬停在图片上方时，将图片的边框设置为2px宽的黑色边框。

示例二：使用JavaScript实现的鼠标悬停效果

<!-- HTML代码 -->
<div class="img-box">
  <img class="img-border" src="sample.jpg" alt="示例图片">
  <p>图片标题</p>
  <i class="fa fa-thumbs-up"></i>
</div>

/* JavaScript代码 */
const img = document.querySelector(".img-border");

img.addEventListener("mouseenter", () => {
  img.style.boxShadow = "0px 0px 10px rgba(0,0,0,.4)";
  img.querySelector("p").style.color = "white";
  img.querySelector("i").classList.add("fa-heart");
});

img.addEventListener("mouseleave", () => {
  img.style.boxShadow = "none";
  img.querySelector("p").style.color = "black";
  img.querySelector("i").classList.remove("fa-heart");
});

当鼠标悬停在图片上时，为图片添加一个黑色、半透明的阴影，并把图片中的标题变为白色，为图片中的元素添加一个fa-heart的class，使其变为一个实心的心形图标。当鼠标离开图片时，恢复图片原本的样式。