SVG导航下划线光标跟随效果

2024-01-12 19:43:59

SVG导航下划线光标跟随效果#

以前看到一篇博文，介绍导航下划线光标跟随的效果，是用的CSS的hover结合CSS3的选择器做的，总感觉效果不太自然，于是我就在想能不能用SVG来做这个效果，试了一下，还是可以的，不过要借助一点JS。先来看下一下按正常思路用JS应当怎么实现。

正常思路的实现

我的思路是这么的：

创建一个SVG元素，并将它放在导航栏的每个链接下方。
使用CSS来设置SVG元素的样式，使其在正常状态下是隐藏的。
在导航栏的每个链接上添加一个事件监听器，当鼠标悬停在链接上时，触发事件监听器。
在事件监听器中，使用JavaScript来显示SVG元素。

这种方法的优点是简单易懂，实现起来也不复杂。但是，这种方法也有一个缺点，那就是SVG元素只能在鼠标悬停在链接上时才显示出来。如果鼠标离开链接，SVG元素就会消失。这可能会让用户感到不自然。

使用SVG实现导航下划线光标跟随效果

为了解决这个问题，我们可以使用SVG来实现导航下划线光标跟随效果。SVG是一种矢量图形格式，它可以创建出各种各样的图形，包括下划线。而且，SVG元素可以被JavaScript控制，我们可以使用JavaScript来控制SVG元素的显示和隐藏。

下面是使用SVG实现导航下划线光标跟随效果的步骤：

创建一个SVG元素，并将它放在导航栏的每个链接下方。
使用CSS来设置SVG元素的样式，使其在正常状态下是隐藏的。
在导航栏的每个链接上添加一个事件监听器，当鼠标悬停在链接上时，触发事件监听器。
在事件监听器中，使用JavaScript来显示SVG元素。
在导航栏的每个链接上添加一个事件监听器，当鼠标离开链接时，触发事件监听器。
在事件监听器中，使用JavaScript来隐藏SVG元素。

这种方法的优点是，SVG元素可以在鼠标悬停在链接上时显示出来，也可以在鼠标离开链接时隐藏起来。这样，用户就不会感到不自然了。

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  
  <style>
    nav {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    nav a {
      margin: 0 10px;
      text-decoration: none;
      color: #000;
    }

    nav a:hover {
      color: #f00;
    }

    svg {
      display: none;
    }

    svg.active {
      display: block;
    }
  </style>
</head>
<body>
  <nav>
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>

  <script>
    const navLinks = document.querySelectorAll('nav a');
    const svgs = document.querySelectorAll('svg');

    navLinks.forEach((navLink, index) => {
      navLink.addEventListener('mouseenter', () => {
        svgs[index].classList.add('active');
      });

      navLink.addEventListener('mouseleave', () => {
        svgs[index].classList.remove('active');
      });
    });
  </script>
</body>
</html>