本文介绍如何在包含换行符的多行文本中实现整体悬停变色，解决因 <br> 拆分导致链接样式无法统一响应的问题，通过 CSS 选择器精准控制父容器内所有链接的悬停状态。
本文介绍如何在包含换行符的多行文本中实现整体悬停变色，解决因 `
` 拆分导致链接样式无法统一响应的问题，通过 css 选择器精准控制父容器内所有链接的悬停状态。
在实际开发中，当多行文本（如地址信息、联系信息）被拆分为多个 <a> 标签并用 <br> 分隔时，若直接对单个 <a> 设置 :hover，则只能触发对应链接的变色，无法实现“鼠标悬停整个区域，所有文字统一变色”的交互效果——这正是你遇到的核心问题。
根本原因在于：CSS 的 :hover 伪类默认作用于被直接悬停的元素本身，而非其兄弟或子元素。而你的 HTML 结构中，每个 <a> 是平级的独立元素，彼此无嵌套关系，因此无法通过 .column:hover a 这类规则统一控制（除非将它们包裹在一个共同的可悬停容器中）。
✅ 正确解法是：将需要联动变色的多个 <a> 元素包裹在一个语义清晰、可响应 hover 的父容器内（如 <span> 或 <div>），再通过后代选择器统一设置悬停样式。
以下是优化后的推荐写法：
<div class="container">
<div class="column">
<!-- 使用 span 包裹整组地址链接 -->
<span class="address-group">
<i class="fa-solid fa-location-dot"></i>
<a href="#">Address line one</a><br>
<a href="#">Address line two</a>
</span>
<br><br>
<span class="social-group">
<a href="#">Follow Us:</a>
<a href="https://www.facebook.com/"><i class="fa-brands fa-facebook-f"></i></a>
</span>
</div>
<!-- 其他 column 同理 -->
</div>对应 CSS（增强可维护性与过渡效果）：
/* 统一悬停：当鼠标进入 .address-group 或 .social-group 区域时，内部所有链接变色 */
.address-group:hover a,
.social-group:hover a {
color: #977847;
transition: color 0.3s ease;
}
/* 特别处理图标颜色（如 Facebook 图标需保持白色） */
.address-group:hover i,
.social-group:hover i.fa-facebook-f {
color: #ffffff; /* 或继承父级颜色 */
}
/* 可选：为悬停区域添加轻微背景提示（提升 UX） */
.address-group:hover,
.social-group:hover {
opacity: 1; /* 确保 hover 不被其他样式干扰 */
}⚠️ 注意事项：
- 避免滥用内联样式（如 style="color: #977847;"），应统一通过 CSS 类管理；
- <br> 在现代布局中并非最佳实践，如需严格控制行高与间距，建议改用 display: block + margin 或 Flex/Grid 内部子项排列；
- 若使用 Font Awesome 图标，请确保已正确引入对应版本（fa-solid / fa-brands）及 CDN；
- transition 应加在非 hover 状态的原始元素上（如 a { transition: color 0.3s; }），否则首次悬停可能无动画效果——更稳妥写法如下：
.column a {
color: #ffffff;
transition: color 0.3s ease;
}
.address-group:hover a,
.social-group:hover a {
color: #977847;
}总结：多行文本悬停变色的关键不在于“消除 <br>”，而在于建立明确的父子关系与作用域。通过语义化容器包裹 + 后代选择器 + 平滑过渡，即可优雅实现视觉一致、交互自然的悬停效果，同时保持 HTML 结构清晰、CSS 易于维护。
