如何实现鼠标悬停父级div时触发CSS文字下划线动画

核心修改逻辑 #

原代码动画触发条件绑定在.newsTitle元素的:hover状态上，仅当鼠标指针悬停在文字本身时才会匹配样式规则。只需调整CSS选择器，将hover触发源改为父级.newsBox容器，即可实现鼠标进入整个卡片区域就触发动画的效果，无需改动HTML结构，也不需要额外编写JavaScript。
唯一需要修改的CSS规则：

• 将原选择器.newsTitle:hover::before替换为.newsBox:hover .newsTitle::before

原伪元素的过渡属性、定位参数、颜色样式全部保留即可，动画表现和原有效果完全一致，仅触发范围扩大到整个父容器。

完整修改后代码 #

HTML结构（无需改动，和原代码一致） #

<div class="newsBox">
  <div class="titleBox">
    <a class="newsTitle" id="newsTitle">News</a>
  </div>
</div>

CSS代码 #

.newsBox {
 padding-top: 5%;
 padding-bottom: 5%;
 background-color: rgba(154, 54, 67, 0.5);
}

.titleBox {
  margin-left: 20px;
}

.newsTitle {
  position: relative;
  font-size: 30px;
  color: rgba(255, 255, 255, 0.8);
  font-style: italic;
}

.newsTitle::before {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: red;
  visibility: hidden;
  transition: all 0.5s ease-in-out;
}

/* 仅修改此处选择器，将hover触发源改为父容器.newsBox */
.newsBox:hover .newsTitle::before {
 visibility: visible;
 width: 100%;
}

效果说明 #

• 鼠标进入.newsBox的任意区域（包括内边距空白区、titleBox的边距区域），都会触发下划线从左到右展开的动画
• 鼠标移出.newsBox区域时，下划线会自动按照原过渡动画收回隐藏
• 如果需要调整触发范围到.titleBox层级，只需要把选择器里的.newsBox:hover改成.titleBox:hover即可，调整灵活度很高

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