实现鼠标悬停父元素时文本下划线动画-小浪学习网

实现鼠标悬停父元素时文本下划线动画

本文介绍了如何通过css实现鼠标悬停在父元素上时，子元素文本出现下划线动画的效果。核心思路是利用CSS伪元素::before或::after创建一个下划线，并通过transition属性实现动画效果。通过控制伪元素的width和visibility属性，可以在鼠标悬停时动态显示下划线，从而达到美观的视觉效果。

实现原理

该效果的核心在于利用CSS的伪元素（::before 或 ::after）来模拟下划线，并利用 transition 属性来实现动画效果。默认情况下，伪元素的宽度设置为0，并且隐藏。当鼠标悬停在父元素上时，伪元素的宽度变为100%，并且显示出来，从而产生下划线动画。

实现步骤

html 结构：

首先，需要一个包含文本的 HTML 结构。通常，会将文本包裹在一个标签或者标签内，并将其放置在一个父级容器内。例如：
```
<div class="newsBox">   <div class="titleBox">     <a class="newsTitle" id="newsTitle">News</a>   </div> </div>
```
CSS 样式：

接下来，需要编写 CSS 样式来创建下划线动画。关键步骤如下：
- 设置父元素样式（可选）： 可以根据需要设置父元素的样式，例如背景颜色、内边距等。
- 设置文本样式： 设置文本的字体大小、颜色、字体样式等。
- 创建伪元素： 使用 ::before 或 ::after 伪元素来创建下划线。设置伪元素的 content 为空字符串，position 为 absolute，并设置 bottom 和 left 属性来定位下划线的位置。设置 background-color 来定义下划线的颜色。
- 设置初始状态： 设置伪元素的初始宽度为 0，并设置 visibility 为 hidden，使其默认情况下不显示。
- 添加过渡效果： 使用 transition 属性来为伪元素的宽度和可见性添加过渡效果，使其在鼠标悬停时产生动画效果。
- 设置悬停状态： 使用 :hover 伪类来设置鼠标悬停时的样式。将伪元素的宽度设置为 100%，并将 visibility 设置为 visible，使其显示出来。
完整的 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;    }  .newsBox:hover .newsTitle::before {    visibility: visible;    width: 100%; }
```
或者，如果想悬停在 .titleBox 上触发动画，则修改 CSS 如下：
```
.titleBox:hover .newsTitle::before {    visibility: visible;    width: 100%; }
```

注意事项

position: relative： 确保文本元素（例如或）的 position 属性设置为 relative，这样伪元素才能相对于文本元素进行定位。
transition 属性： transition 属性可以控制动画的速度和效果。可以根据需要调整 transition 的值，例如 transition: width 0.3s ease-in-out;。
兼容性： 该方法在现代浏览器中具有良好的兼容性。