如何为图片特定区域添加悬停背景发光（drop-shadow）效果？

方法一：使用HTML <map> + <area> 配合JS/CSS #

这是最贴合“指定坐标区域”需求的方案，无需切割图片：

1. 给图片定义<map>和对应坐标的<area>标签，把右侧橙色区域（及其他需要的区域）标记为可交互热区；
2. 给图片套一个容器，或直接给图片设置默认样式；
3. 通过JS监听<area>的mouseover和mouseout事件，切换图片的filter属性（即你使用的drop-shadow）。

示例代码：

<div class="img-container">
  <img src="你的图片地址" usemap="#imageMap" alt="示例图">
  <map name="imageMap">
    <!-- coords需根据图片实际坐标调整，格式为x1,y1,x2,y2 -->
    <area shape="rect" coords="600,0,800,600" class="hover-area" alt="橙色区域">
  </map>
</div>

<style>
  .img-container img {
    transition: filter 0.3s;
  }
  .img-container img.hover-active {
    filter: drop-shadow(16px 16px 20px red);
  }
</style>

<script>
  const areas = document.querySelectorAll('.hover-area');
  const img = document.querySelector('.img-container img');
  
  areas.forEach(area => {
    area.addEventListener('mouseover', () => img.classList.add('hover-active'));
    area.addEventListener('mouseout', () => img.classList.remove('hover-active'));
  });
</script>

方法二：用绝对定位的透明元素覆盖区域 #

如果不想用<map>，可以直接在图片上方放一个透明<div>，精准定位到目标区域：

1. 给图片容器设置position: relative；
2. 在容器内添加position: absolute的空div，通过top/left/width/height匹配橙色区域的尺寸和位置；
3. 给这个div加hover事件，控制图片的filter样式。

示例代码：

<div class="img-container">
  <img src="你的图片地址" alt="示例图">
  <!-- 定位数值根据实际图片调整 -->
  <div class="hover-overlay" style="top:0; left:600px; width:200px; height:600px;"></div>
</div>

<style>
  .img-container {
    position: relative;
    display: inline-block;
  }
  .img-container img {
    transition: filter 0.3s;
  }
  .hover-overlay {
    position: absolute;
    cursor: pointer;
  }
  .img-container .hover-overlay:hover ~ img {
    filter: drop-shadow(16px 16px 20px red);
  }
</style>

方法三：Photoshop预处理切图 #

如果图片区域边界清晰，也可以用PS把图片切成多个独立部分（比如单独切出右侧橙色区域），再将每个切片作为独立<img>拼接，直接给目标切片加hover样式：

• 用PS切片工具划分区域，导出每个切片；
• 在HTML中按顺序拼接切片（用vertical-align: middle或flex布局消除拼接缝隙）；
• 给橙色区域的切片添加hover状态下的drop-shadow。

这种方法无需JS，纯CSS即可实现，但响应式场景下切片可能出现错位，需要额外做适配处理。

内容的提问来源于stack exchange，提问作者alex deralu