多行文本鼠标悬停时统一变色的问题求助

要实现鼠标悬停在整个列区域时，该列内所有文本同时变色，只需要修改CSS的hover触发逻辑，利用父元素:hover + 后代选择器即可解决，不需要改动布局或换行方式：

核心修改点 #

将原有的单个<a>标签hover样式，改为当鼠标悬停在.column上时，触发其内部所有<a>标签的颜色变化：

/* 替换原来的a:hover */
.column:hover a {
  color: #977847;
}

同时可以给.column添加cursor: pointer，让鼠标悬停时显示指针，提升交互提示：

.column {
  flex: 20%;
  height: 130px;
  padding: 10px;
  margin: 5px;
  text-align: center;
  text-decoration: none;
  cursor: pointer; /* 新增：交互提示 */
}

完整修改后的代码 #

CSS #

.column {
  flex: 20%;
  height: 130px;
  padding: 10px;
  margin: 5px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.container {
  display: flex;
  color: #FFFFFF;
  font-family: Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  font-size: 20px;
  text-decoration: none;
}

.container a {
  text-decoration: none;
  color: #FFFFFF;
}

/* 修改后的hover触发逻辑 */
.column:hover a {
  color: #977847;
}

HTML #

<div class='header'>
  <div class="container">
    <span class="column">
      <a href=""> Address line one </a>
      <br>
      <a href=""> Address line two </a>
      <br>
      <br>
      <a> Follow Us: </a> <a href="https://www.facebook.com/"><i class="fa-brands fa-facebook-f"></i></a>
    </span>
    <div class="column">
      <a> second column </a>
      <br>
      <a> This is second column of our grid system</a>
    </div>
    <div class="column">
      <a> Third column </a>
      <br>
      <a> This is third column of our grid system</a>
    </div>
  </div>
</div>

说明 #

• 原方案1的问题：你尝试给元素加不同类，但没利用父容器的hover事件统一控制后代元素，现在通过.column:hover a，只要鼠标进入列区域，所有内部链接都会同步变色。
• 原方案2的问题：完全不需要用pre或修改white-space，换行可以保留原有的<br>，不影响布局和hover效果。

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