透明Logo图片hover触发范围异常，如何实现仅悬停图片时触发效果？

问题原因 #

当前触发hover效果的是包裹图片的<a>标签，它继承了.header a的padding:12px，本身是矩形区域，所以即便图片是透明的，悬停到<a>的任何区域都会触发样式变化；同时默认情况下，图片的hover判断基于矩形边界，而非实际像素。

修复方案 #

修改CSS代码，让hover仅响应图片的实际非透明区域，同时移除<a>标签的多余内边距：

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f1f1f1;
  padding: 20px 10px;
}

.header a {
  color: black;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  line-height: 25px;
  border-radius: 4px;
}

/* 移除logo链接的内边距，避免多余触发区域 */
.header a.logo {
  display: inline-block;
  align-items: center;
  text-decoration: none;
  padding: 0; /* 覆盖继承的padding */
  pointer-events: none; /* 让a标签不接收鼠标事件，交给图片处理 */
}

.header a.logo img {
  width: 25%;
  height: 25%;
  transition: filter 0.3s ease-in-out;
  pointer-events: auto; /* 让图片接收鼠标事件 */
  /* 让hover判断基于图片的实际非透明区域 */
  shape-outside: url("https://i.sstatic.net/iAHg5.png");
  clip-path: url("https://i.sstatic.net/iAHg5.png");
}

/* 直接监听图片的hover事件 */
.header a.logo img:hover {
  filter: brightness(1.2);
}

@media screen and (max-width: 500px) {
  .header {
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }
}

关键说明 #

• padding: 0：移除<a>标签的多余内边距，让它刚好包裹图片。
• pointer-events：让<a>标签不响应鼠标事件，把交互权交给图片本身。
• shape-outside和clip-path：配合使用让浏览器识别图片的实际非透明轮廓，仅在悬停到该轮廓内时触发hover效果，和苹果官网实现逻辑一致。
• 调整hover触发目标：从<a>标签改为<img>标签，确保样式变化仅在图片本身被悬停时生效。

补充提示 #

如果后续更换logo图片，需同步更新shape-outside和clip-path中的图片路径，确保路径可正常访问。

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