如何精准控制链接卡片悬停效果：仅标题显示下划线

今天咱们聊聊一个前端开发中挺常见，但又容易踩坑的细节：当你把一个图文链接模块做成可点击的卡片时，如何让鼠标悬停时，只有标题部分出现下划线，而旁边的描述文字却保持“淡定”？

这问题看似简单，但如果你图省事，直接给整个链接标签设置一个全局的 `a:hover { text-decoration: underline }`，那效果可就热闹了——卡片里所有的文本，不管是标题、描述，甚至是角落里的小标签，都会齐刷刷地冒出下划线，视觉上瞬间变得杂乱无章，完全破坏了设计的层次感。

正确解法：用后代选择器实现“精准打击”

其实解决方案非常优雅，根本不需要动用复杂的 `:not()` 选择器或者 Ja vaScript。核心思路就一句话：把悬停样式从父级链接上“剥离”出来，精准地“注射”到目标子元素上。

具体怎么做？咱们直接看代码。首先，取消链接默认的文本装饰，然后利用CSS的后代选择器，只在悬停状态触发时，去影响特定的标题元素：

a {
  text-decoration: none;
  cursor: pointer;
}
/* 关键在这里：只有当鼠标悬停在a标签上时，才对其内部的.link-title添加下划线 */
a:hover .link-title,
a:active .link-title,
a:focus .link-title {
  text-decoration: underline;
}

对应的HTML结构保持语义清晰即可，无需任何额外改动：

  
    

      

    

    

      
Vacations
      
Let's take some vacations!
    

  

✅ 这么做的几大好处

• 符合CSS层叠本质：逻辑清晰，优先级管理起来也自然。
• 保持HTML纯净：不需要为了样式去添加一堆冗余的类名或修改结构。
• 兼容性无忧：这套写法在现代浏览器乃至IE9+上都能稳定工作。
• 体验更完整：同时兼顾了 `:active`（点击时）和 `:focus`（键盘聚焦时）状态，对键盘导航用户非常友好。

⚠️ 实践时需要注意的几点

• 确保是“真后代”：标题元素 `.link-title` 必须是那个 `` 标签的后代元素。如果是兄弟或者隔得太远，选择器 `a:hover .link-title` 可就找不到它了。
• 小心显示模式的“陷阱”：如果 `.link-title` 被设置成了 `display: inline-block`、`flex` 这类非默认的行内显示方式，标准的 `text-decoration` 效果可能会不如预期。这时候，不妨用 `border-bottom: 1px solid currentColor` 来模拟下划线，往往更可控。
• 遵守HTML规范：切记不要在 `` 标签里面再嵌套另一个 `` 或 ``，这不仅是规范所禁止的，还会严重干扰无障碍访问体验。