Grid布局锚点Hover效果异常：部分兄弟元素无响应及触发位置偏差

问题1：CSS通用兄弟选择器仅影响右下侧兄弟元素 #

原因 #

CSS通用兄弟选择器(~)只能选中DOM树中排在当前元素之后的同级元素，无法作用于当前元素之前的同级元素。所以hover左侧/上方的<a>时，只有右侧/下方的兄弟会被修改样式，反之则无变化。

解决方案：使用:has()伪类（推荐） #

利用CSS的:has()伪类可以检测父容器内是否存在被hover的<a>，然后统一设置其他同级<a>的透明度。纯CSS实现，逻辑简洁无需JS。

示例代码：

<div class="gallery">
  <a href="#"><img src="img1.jpg" alt="Image 1"></a>
  <a href="#"><img src="img2.jpg" alt="Image 2"></a>
  <a href="#"><img src="img3.jpg" alt="Image 3"></a>
  <a href="#"><img src="img4.jpg" alt="Image 4"></a>
</div>

.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.gallery a {
  transition: opacity 0.3s ease;
}

/* 容器内任意a被hover时，修改其他a的透明度 */
.gallery:has(a:hover) a:not(:hover) {
  opacity: 0.5;
}

注：:has()伪类已支持现代主流浏览器（Chrome 105+、Firefox 121+、Safari 15.4+），需兼容旧浏览器可改用下方JS方案。

问题2：JS添加hovered类时触发位置异常 #

原因 #

使用mouseover/mouseout事件时，事件会冒泡，且鼠标进入/离开元素或其子元素时都会触发。同时，mouseout的触发边界基于元素盒模型边缘，和视觉光标尖端的感知差异，导致样式提前或延迟生效。

解决方案：改用mouseenter/mouseleave事件 #

mouseenter和mouseleave不会冒泡，仅在鼠标完全进入/离开元素本身时触发一次，触发边界更贴合视觉感知，能解决位置异常问题。

示例代码：

<div class="gallery">
  <a href="#"><img src="img1.jpg" alt="Image 1"></a>
  <a href="#"><img src="img2.jpg" alt="Image 2"></a>
  <a href="#"><img src="img3.jpg" alt="Image 3"></a>
  <a href="#"><img src="img4.jpg" alt="Image 4"></a>
</div>

.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.gallery a {
  transition: opacity 0.3s ease;
}

.gallery.hovered a:not(:hover) {
  opacity: 0.5;
}

const gallery = document.querySelector('.gallery');
const links = gallery.querySelectorAll('a');

links.forEach(link => {
  // 鼠标完全进入a元素时添加类
  link.addEventListener('mouseenter', () => {
    gallery.classList.add('hovered');
  });
  // 鼠标完全离开a元素时移除类
  link.addEventListener('mouseleave', () => {
    gallery.classList.remove('hovered');
  });
});

内容的提问来源于stack exchange，提问作者Maarten -Monica for president