<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> ul { display: flex; position: absolute; width: 800px; top: 50%; left: 50%; transform: translate(-50%, -50%); list-style: none; } li { position: relative; padding: 20px; color: #000; line-height: 1; transition: 0.2s all linear; cursor: pointer; } li::before { content: ""; position: absolute; top: 0; left: 100%; width: 0; height: 100%; border-bottom: 2px solid #000; transition: 0.2s all linear; } li:hover::before { width: 100%; top: 0; left: 0; transition-delay: 0.1s; border-bottom-color: #000; } li:hover ~ li::before { left: 0; } li:active { background: #000; color: #fff; } .active ~ li::before { left: 0; } .active::before { width: 100%; left: 0; top: 0; } </style> </head> <body> <ul> <li class="active">不可思议的CSS</li> <li>导航栏</li> <li>光标小下划线跟随</li> <li>PURE CSS</li> <li>Nav Underline</li> </ul> <script src="./assets/js/jquery.min.js"></script> <script> // 使用 jquery $('li').on('click', function () { $(this).addClass('active').siblings().removeClass('active') }) </script> </body> </html>
导航下划线跟随
最新推荐文章于 2024-03-12 10:31:17 发布