如何实现鼠标悬停图片时span元素不消失？

问题根源 #

你遇到的问题本质是事件触发范围的冲突：

• 单独给img加hover时，span在img上方，鼠标移到span上就会离开img的hover范围，导致img的hover效果消失，同时span因失去关联触发条件出现“消失”现象。
• 给li加hover后，span所在区域也会触发li的hover，导致img始终保持变暗效果，不符合你“hover不作用于span”的需求；而pointer-events: none会让鼠标事件穿透span到li，所以无法阻止li的hover触发。

方案1：允许span区域触发img变暗（解决span消失问题） #

如果可以接受鼠标在span上时img保持变暗，只需要修正布局并调整hover触发对象：

CSS代码 #

li {
  position: relative; /* 让span的绝对定位基于li */
  display: inline-block; /* 确保li包裹图片，避免布局错乱 */
}

/* 当li被hover时，让img变暗 */
li:hover a img {
  -webkit-filter: brightness(70%);
  transition: all 0.5s ease;
}

li span {
  position: absolute;
  height: 10%;
  width: 70%;
  top: 45%;
  left: 15%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: white;
  color: black;
  font-family: 'OstrichSans Regular';
  font-size: large;
  pointer-events: none; /* 让span不干扰鼠标事件，hover穿透到li */
}

HTML代码（无需修改） #

<li key={index}>
  <span>{set.set_name}</span>
  <a href="./sets/[slug]"><img src="https://dummyimage.com/600x400/000/fff" alt={set.set_name}/></a>
</li>

方案2：仅img区域触发变暗（完全符合需求） #

如果必须让鼠标在span上时img不变暗，需要结合JavaScript实现精确的事件判断：

CSS代码 #

li {
  position: relative;
  display: inline-block;
}

/* 用类代替直接hover，方便JS控制 */
img.img-hover-dark {
  -webkit-filter: brightness(70%);
  transition: all 0.5s ease;
}

li span {
  position: absolute;
  height: 10%;
  width: 70%;
  top: 45%;
  left: 15%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: white;
  color: black;
  font-family: 'OstrichSans Regular';
  font-size: large;
  cursor: pointer;
}

JavaScript代码 #

// 获取所有目标li元素
const listItems = document.querySelectorAll('li');

listItems.forEach(item => {
  const img = item.querySelector('img');
  const span = item.querySelector('span');

  // 鼠标进入li时，判断是否在span外，是则添加变暗类
  item.addEventListener('mouseover', (e) => {
    if (e.target !== span) {
      img.classList.add('img-hover-dark');
    }
  });

  // 鼠标离开li时，移除变暗类
  item.addEventListener('mouseout', () => {
    img.classList.remove('img-hover-dark');
  });

  // 鼠标进入span时，移除变暗类
  span.addEventListener('mouseover', () => {
    img.classList.remove('img-hover-dark');
  });
});

HTML代码（无需修改） #

<li key={index}>
  <span>{set.set_name}</span>
  <a href="./sets/[slug]"><img src="https://dummyimage.com/600x400/000/fff" alt={set.set_name}/></a>
</li>

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