在前端开发中，有时需要对图片进行交互效果的处理，其中之一就是当用户将鼠标悬停在图片上时，使其变暗。本文将介绍如何使用 CSS 和 JavaScript 实现这种效果。
使用 CSS 实现
可以通过将鼠标悬停的图片设置为背景图片，并使用 CSS 过渡动画来实现这种效果。以下是实现的步骤：
1. 添加 HTML
首先要添加一个 img 元素和一个 div 元素到你的 HTML 文件中。img 元素用于显示原始的图像，div 元素用于作为覆盖层。例如：
<div class="image-container"> <img src="your-image.jpg" alt="Your Image"> <div class="overlay"></div> </div>
2. 添加 CSS 样式
接下来，需要使用 CSS 样式来定义覆盖层的样式。覆盖层将被放置在图像上，并且透明度将在鼠标悬停时从 0 到 1 进行过渡。
-- -------------------- ---- ------- ---------------- - --------- --------- - -------- - --------- --------- ---- -- ----- -- ------ ----- ------- ----- ----------------- ------- -- -- ----- -------- -- ----------- ------- ---- ----- - ---------------------- -------- - -------- -- -
3. 解释 CSS 样式
首先，将父元素 .image-container 的 position 属性设置为 relative。这是因为我们需要在该元素内部创建另一个元素（覆盖层），并将其放置在图像上面。
然后，创建子元素 .overlay。将 position 属性设置为 absolute，以便使其相对于父元素进行定位，并设置 top，left，width 和 height 属性来覆盖整个图像。
为了使覆盖层看起来半透明，使用 background-color 属性添加黑色的半透明背景。并将 opacity 属性设置为 0，这意味着在未悬停时不可见。最后，使用 transition 属性定义动画过渡效果。
当用户将鼠标悬停在图像上时，使用 .image-container:hover .overlay 选择器将覆盖层的 opacity 属性设置为 1，从而实现淡入效果。
使用 JavaScript 实现
如果你想要更加自定义和高级的效果，可以使用 JavaScript 来动态控制图片的透明度。以下是实现的步骤：
1. 添加 HTML
与上面的方法类似，添加一个 img 元素到你的 HTML 文件中。例如：
<img id="your-image" src="your-image.jpg" alt="Your Image">
2. 添加 JavaScript
接下来，需要添加 JavaScript 文件并编写以下代码：
-- -------------------- ---- ------- ----- --- - -------------------------------------- --------------------------------- ------------- -------------------------------- ------------ -------- ------------- - ---------------- - ------------------ - -------- ------------ - ---------------- - ------------------- -
3. 解释 JavaScript 代码
首先，使用 document.getElementById 方法获取图像元素，并将其存储在变量 img 中。
然后，使用 addEventListener 方法添加两个事件监听器，一个是鼠标悬停时触发的 mouseover 事件，另一个是鼠标移开时触发的 mouseout 事件。这些事件将分别调用 darkenImage 和 resetImage 函数。
当鼠标悬停在图像上时，`dark
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29353