鼠标悬浮显示下划线特效：华丽而又实用的动效设计方案

2023-10-03 05:28:16

正文：

鼠标悬浮显示下划线特效是一种常见而又引人注目的动效设计方案，它能为网页元素增添活力和趣味性，提升用户体验。作为一名经验丰富的技术博客创作专家，我将向您展示如何利用CSS3和JavaScript创建一个鼠标悬停时显示下划线特效的解决方案。

首先，我们需要添加CSS样式来定义下划线的外观和动画效果。您可以使用以下代码：

.underline {
  position: relative;
  display: inline-block;
  text-decoration: none;
}

.underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background-color: #333;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.underline:hover::after {
  opacity: 1;
}

在这个代码中，我们定义了“.underline”类来包含我们的下划线元素。我们使用了“::after”伪元素来创建下划线，并将其定位在元素的底部。我们还设置了它的宽度、高度、背景颜色和过渡效果。当鼠标悬停在元素上时，下划线将通过改变透明度而显示出来。

接下来，我们需要添加JavaScript代码来监听鼠标移动事件并更新下划线的位置。您可以使用以下代码：

const underlines = document.querySelectorAll(".underline");

underlines.forEach((underline) => {
  underline.addEventListener("mousemove", (event) => {
    const { offsetLeft, offsetWidth } = underline;
    const x = event.clientX - offsetLeft;

    const width = Math.min(Math.max(0, x), offsetWidth);

    underline.querySelector("::after").style.width = `${width}px`;
  });
});