CSS:hover时为nth-of-type元素添加内容的实现问题

原CSS写法的问题 #

1. 选择器语法错误：你写的main-categories:nth-of-type(5) sub-categories a:hover main-categories:nth-of-type(5):a不符合CSS选择器规则，无法正确关联子分类hover事件与主分类的<a>元素。
2. content属性使用错误：content仅能作用于::before/::after这类伪元素，不能直接修改HTML元素的原生文本内容。
3. CSS无向上选择能力：CSS无法通过子元素的状态直接选中父元素，需借助:has伪类（现代浏览器支持）或JavaScript实现跨层级状态关联。

方案1：使用CSS :has伪类（现代浏览器） #

利用:has伪类检测子分类链接的hover状态，通过伪元素覆盖原文本：

/* 给主分类的<a>设置相对定位，为伪元素定位做准备 */
main-categories:nth-of-type(5) > a {
  position: relative;
}

/* 默认隐藏伪元素 */
main-categories:nth-of-type(5) > a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transition: opacity 0.2s ease;
  color: inherit; /* 继承原文本颜色 */
}

/* 当子分类链接被hover时，显示伪元素内容并隐藏原文本 */
main-categories:nth-of-type(5):has(sub-categories a:hover) > a {
  color: transparent;
}

main-categories:nth-of-type(5):has(sub-categories a:hover) > a::before {
  content: '• News • Education';
  opacity: 1;
}

兼容性说明：:has伪类支持Chrome 105+、Firefox 121+、Safari 15.4+，若需兼容旧版浏览器，推荐使用下方JavaScript方案。

方案2：使用JavaScript（全浏览器兼容） #

通过监听子分类链接的mouseenter和mouseleave事件，直接修改主分类<a>的文本内容：

// 获取目标元素
const mainCategoryLink = document.querySelector('main-categories:nth-of-type(5) > a');
const subCategoryLinks = document.querySelectorAll('main-categories:nth-of-type(5) sub-categories a');

// 保存原文本内容
const originalText = mainCategoryLink.textContent;

// 绑定hover事件
subCategoryLinks.forEach(link => {
  link.addEventListener('mouseenter', () => {
    mainCategoryLink.textContent = '• News • Education';
  });
  
  link.addEventListener('mouseleave', () => {
    mainCategoryLink.textContent = originalText;
  });
});

该方案无需考虑浏览器兼容性，所有现代及旧版浏览器均可正常运行。

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