JavaScript实现画廊项hover时仅显示自身标题和播放图标问题求助

嘿，我懂你的困扰啦——现在鼠标悬停任意一个画廊项，所有的播放图标和标题都会一起显示出来，这肯定不是你想要的效果😅。问题出在你当前的JS代码里：每次触发hover事件时，你遍历了所有的播放图标和标题元素，所以才会全部一起冒出来。下面给你两种实用的解决思路：

方法一：纯CSS实现（强烈推荐） #

这种hover交互效果用CSS就能完美搞定，完全不需要写JavaScript，不仅代码更简洁，浏览器原生支持的性能也更好。根据你的HTML结构，每个.gallery-item-block内部包含对应的图标和标题，直接用CSS的:hover伪类就能精准控制子元素的显示：

/* 给画廊项添加过渡效果 */
.gallery-item-block {
  transition: all 0.5s ease;
}

/* 默认状态下隐藏图标和标题 */
.gallery-item-block-iconplay,
.gallery-item-block-title {
  display: none;
  opacity: 0; /* 配合过渡实现淡入 */
  transition: opacity 0.5s ease;
}

/* 悬停画廊项时，显示内部的图标和标题，并触发淡入 */
.gallery-item-block:hover .gallery-item-block-iconplay,
.gallery-item-block:hover .gallery-item-block-title {
  display: block;
  opacity: 1;
}

如果你的fade-in类是自定义的动画，也可以替换成CSS关键帧动画：

@keyframes fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.gallery-item-block:hover .gallery-item-block-iconplay,
.gallery-item-block:hover .gallery-item-block-title {
  display: block;
  animation: fade-in 0.5s ease forwards;
}

方法二：修改你的JavaScript代码 #

如果你一定要用JS来实现，核心思路是：只操作当前悬停项内部的图标和标题，而不是全局所有的元素。可以通过当前元素的querySelector来定位子元素：

const img_block = document.querySelectorAll('.gallery-item-block');

// 用forEach遍历每个画廊项，绑定事件
img_block.forEach(item => {
  item.style.transition = 'all 0.5s ease';
  
  // 鼠标悬停事件
  item.addEventListener('mouseover', () => {
    // 获取当前项内部的播放图标和标题
    const playBtn = item.querySelector('.gallery-item-block-iconplay');
    const title = item.querySelector('.gallery-item-block-title');
    
    playBtn.style.display = 'block';
    playBtn.classList.add('fade-in');
    
    title.style.display = 'block';
    title.classList.add('fade-in');
  });
  
  // 鼠标离开事件
  item.addEventListener('mouseout', () => {
    const playBtn = item.querySelector('.gallery-item-block-iconplay');
    const title = item.querySelector('.gallery-item-block-title');
    
    playBtn.style.display = 'none';
    title.style.display = 'none';
  });
});

这里用addEventListener绑定事件比直接赋值onmouseover更灵活，而且通过item.querySelector精准获取当前项的子元素，就不会出现“一hover全显示”的问题啦。

备注：内容来源于stack exchange，提问作者TecNight