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);
  }
);

效果图:

相关推荐
袁煦丞44 分钟前
【局域网秒传神器】LocalSend:cpolar内网穿透实验室第418个成功挑战
前端·程序员·远程工作
江城开朗的豌豆1 小时前
Vuex数据突然消失?六招教你轻松找回来!
前端·javascript·vue.js
好奇心笔记1 小时前
ai写代码随机拉大的,所以我准备给AI出一个设计规范
前端·javascript
江城开朗的豌豆1 小时前
Vue状态管理进阶:数据到底是怎么"跑"的?
前端·javascript·vue.js
用户21411832636021 小时前
dify案例分享-Dify v1.6.0 重磅升级:双向 MCP 协议引爆 AI 生态互联革命
前端
程序员海军1 小时前
AI领域又新增协议: AG-UI
前端·openai·agent
我想说一句1 小时前
React待办事项开发记:Hook魔法与组件间的悄悄话
前端·javascript·前端框架
真夜1 小时前
CommonJS与ESM
前端·javascript
LaoZhangAI1 小时前
GPT-image-1 API如何传多图:开发者完全指南
前端·后端
G等你下课1 小时前
从点击到执行:如何优雅地控制高频事件触发频率
前端·javascript·面试