js实现导航栏鼠标移入时,下划线跟随鼠标滑动

话不多说,上代码:

html代码:

javascript 复制代码
<div class="nav clearfix">
          <div class="bottomLine"></div>
          <ul class="clearfix">
            <li class="nav__item"><a href="./index.html">首页</a></li>
            <li class="nav__item zixun1"><a href="./行业资讯/hyzx.html">行业资讯</a></li>
            <li class="nav__item gy1"><a href="./工业互联网/gyhlw.html">工业互联网</a></li>
            <li class="nav__item cn1"><a href="./共享产能/gxcn.html">共享产能</a></li>
            <li class="nav__item sj1"><a href="./共享设计/gxsj.html">共享设计</a></li>
            <li class="nav__item yg1"><a href="#">共享用工</a></li>
            <li class="nav__item"><a href="#">供应链金融</a></li>
            <li class="nav__item"><a href="#">企业服务</a></li>
            <li class="nav__item qy1"><a href="./会员企业风采/hyqyfc.html">会员企业风采</a></li>
            <li class="nav__item"><a href="./关于我们/gywm.html">关于我们</a></li>
          </ul>

      </div>

css代码:

css 复制代码
.nav {
    width: 975px;
    height: 70px;
    margin-left: 230px;
    float: left;
    position: relative;
    .bottomLine {
      position: absolute;
      left: 0px;
      bottom: 0;
      height: 4px;
      margin: 0;
      background-color: #0099ff;
      transition: all 0.3s ease;
      height: 2px;
      width: 0px;
    }
    ul {
      li {
        float: left;
        padding: 0 15px;
        font-size: 16px;
        font-family: Microsoft YaHei;
        cursor: pointer;
        text-align: center;
        span {
          position: absolute;
          left: 5px;
          bottom: 0;
          width: 0px;
          height: 3px;
          background-color: #52a6ff;
        }
        a {
          display: inline-block;
          color: black;
        }
      }
      
    }
    
  }

js代码:

javascript 复制代码
   <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>

$(".nav li").hover(function () {
  $(".bottomLine").css("width", parseFloat($(this).width()+20) + "px");
  $(".bottomLine").css("left", parseFloat($(this)[0].offsetLeft+4 ) + "px");
  $(".nav .bottomLine").stop(true, true).fadeIn(400);

})
$(".nav").hover(
  function () {},
  function () {
    $(".bottomLine").css("width", 0 + "px");
    $(".nav .bottomLine").stop(true, true).fadeOut(400);
  }
);

效果图:

相关推荐
知识分享小能手1 分钟前
微信小程序入门学习教程,从入门到精通,项目实战:美妆商城小程序 —— 知识点详解与案例代码 (18)
前端·学习·react.js·微信小程序·小程序·vue·前端技术
情深不寿31711 分钟前
C++特殊类的设计
开发语言·c++·单例模式
DoraBigHead14 分钟前
React 中的代数效应:从概念到 Fiber 架构的落地
前端·javascript·react.js
LuckySusu15 分钟前
【vue篇】Vue 性能优化全景图:从编码到部署的优化策略
前端·vue.js
卓伊凡19 分钟前
【03】建立隐私关于等相关页面和内容-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓
前端
笨笨鸟慢慢飞21 分钟前
Vue3后退不刷新,前进刷新
前端
流星白龙23 分钟前
【Qt】3.认识 Qt Creator 界面
java·开发语言·qt
LuckySusu24 分钟前
【vue篇】SSR 深度解析:服务端渲染的“利”与“弊”
前端·vue.js
LuckySusu24 分钟前
【vue篇】SPA 单页面应用:现代 Web 的革命与挑战
前端·vue.js