如何实现仅当悬停div内的链接文本时，为整个div添加背景色

没问题！你要的效果可以通过两种方式实现，取决于你需要的浏览器兼容性：

一、现代浏览器最优解：使用CSS :has() 伪类 #

这是最简单的方法，利用CSS的:has()伪类直接选中包含正被悬停的链接的父div。

核心代码： #

.link { 
  padding: 50px; 
  border: 1px solid black; 
  /* 可选：添加过渡动画，让颜色变化更自然 */
  transition: background-color 0.2s ease;
}

/* 当.link容器内的<a>被悬停时，修改.link的背景色 */
.link:has(a:hover) {
  background-color: red;
}

原理说明： #

:has(a:hover)会精准匹配所有包含正在被鼠标悬停的<a>元素的.link容器。这样只有当鼠标真正停在链接文本上时，整个div才会变红，完全符合你的需求。

兼容性： #

:has()已经被Chrome、Firefox 121+、Safari、Edge等主流现代浏览器支持，如果你的项目不需要兼容特别老旧的浏览器，这是首选方案。

二、兼容旧浏览器方案：使用JavaScript监听事件 #

如果需要支持不支持:has()的旧浏览器（比如Firefox 120及以下、旧版Edge等），可以用JS手动监听链接的悬停事件，动态给父div添加/移除样式类。

步骤1：修改CSS，新增激活类 #

.link { 
  padding: 50px; 
  border: 1px solid black;
  transition: background-color 0.2s ease;
}

/* 定义激活状态的背景色 */
.link.active {
  background-color: red;
}

步骤2：添加JavaScript事件监听 #

// 获取所有.link容器内的链接元素
const linkElements = document.querySelectorAll('.link a');

linkElements.forEach(link => {
  // 鼠标进入链接时，给父div添加active类
  link.addEventListener('mouseenter', () => {
    link.parentElement.classList.add('active');
  });
  
  // 鼠标离开链接时，移除active类
  link.addEventListener('mouseleave', () => {
    link.parentElement.classList.remove('active');
  });
});

完整示例（现代方案） #

<div class="container">
  <div class="link">
    <a href="example.com">This is the link</a>
  </div>
</div>

<style>
.link { 
  padding: 50px; 
  border: 1px solid black;
  transition: background-color 0.2s ease;
}
.link:has(a:hover) {
  background-color: red;
}
</style>

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