js鼠标经过图片变色

基础概念

JavaScript鼠标经过图片变色是一种常见的网页交互效果，通过监听鼠标事件（如mouseover和mouseout），改变图片的样式属性（如背景色或图片源）来实现。

类型

背景色变化：改变图片容器的背景色。
图片替换：更换为另一张图片。
滤镜效果：应用CSS滤镜改变图片显示效果。

应用场景

导航菜单：高亮当前选中的菜单项。
产品展示：突出显示用户感兴趣的产品。
按钮交互：提供点击前的视觉提示。

示例代码

以下是一个简单的JavaScript示例，实现鼠标经过图片时背景色变色的效果：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Color Change on Hover</title>
<style>
  .image-container {
    width: 200px;
    height: 200px;
    background-image: url('initial.jpg');
    background-size: cover;
    transition: background-color 0.3s;
  }
</style>
</head>
<body>

<div class="image-container" id="imageContainer"></div>

<script>
  var container = document.getElementById('imageContainer');

  container.addEventListener('mouseover', function() {
    this.style.backgroundColor = 'rgba(255, 0, 0, 0.5)';
  });

  container.addEventListener('mouseout', function() {
    this.style.backgroundColor = '';
  });
</script>

</body>
</html>