如何在父容器悬停时为子元素添加文字装饰效果

本文介绍如何通过CSS选择器实现当鼠标悬停于父容器（如 .wrapper）时，为其内部特定子元素（如 #title）动态添加文字装饰（如 line-through），无需JavaScript，纯CSS即可完成。

本文介绍如何通过css选择器实现当鼠标悬停于父容器（如 `.wrapper`）时，为其内部特定子元素（如 `#title`）动态添加文字装饰（如 `line-through`），无需javascript，纯css即可完成。

在实际前端开发中，常需实现“悬停父区域，高亮/修饰其内部某文本”的交互效果。例如，在职位列表卡片中，当用户将鼠标移至整个卡片（.wrapper）上方时，希望标题文字自动添加删除线，以增强视觉反馈。这完全可通过CSS的后代选择器与伪类组合实现。

核心语法如下：

.wrapper:hover #title {  text-decoration: line-through;}

该规则表示：当 .wrapper 元素处于 :hover 状态时，其内部所有匹配 #title 的后代元素将应用 text-decoration: line-through 样式。注意此处使用的是空格分隔的后代选择器（而非 > 子选择器），因此即使 #title 深嵌套在多层结构中（如本例中位于 <a> 内的 <div id="listing"> 中），依然能被精准命中。

⚠️ 注意事项：

• ID 选择器（如 #title）虽有效，但不推荐在多个同类组件中重复使用。建议改用语义化类名（如 .listing-title），提升可维护性与复用性；
• 若 <a> 标签本身已设置默认下划线（浏览器对链接的 text-decoration: underline），可能干扰效果，建议显式重置：

  .wrapper a {  text-decoration: none; /* 移除链接默认下划线 */}

• text-decoration 属于不可继承属性，必须直接作用于目标文本元素（如 <p id="title">），无法通过父级设置后继承；
• 如需过渡动画（如平滑划线出现），可补充：

  #title {  transition: text-decoration 0.2s ease;}

总结：利用 .parent:hover .child 这一经典模式，开发者能轻松解耦交互触发区域与样式作用目标，既保持HTML结构语义清晰，又实现灵活、高性能的视觉反馈。务必避免滥用ID，优先采用BEM等规范命名类名，为规模化项目奠定基础。