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

效果图:

相关推荐
Forfun_tt2 分钟前
xss-labs pass-12
前端·xss
workflower7 分钟前
基本作业-管理⾃⼰的源代码
开发语言·单元测试·软件工程·需求分析·个人开发
froginwe1116 分钟前
Pandas DataFrame:深入理解数据分析的利器
开发语言
云枫晖18 分钟前
Webpack系列-编译过程
前端·webpack
Jm_洋洋19 分钟前
【Linux系统编程】程序替换:execve(execl、execlp、execle、execv、execvp、execvpe)
linux·运维·c语言·开发语言·程序人生
AskHarries27 分钟前
Toolhub — 一个干净实用的在线工具集合
前端·后端
冯诺依曼的锦鲤41 分钟前
算法练习:前缀和专题
开发语言·c++·算法
H尗43 分钟前
Vue3响应式系统的精妙设计:深入理解 depsLength 与 trackId 的协同艺术
前端·vue.js
昔人'1 小时前
html`contenteditable`
前端·html
爱宇阳1 小时前
npm 常用标签与使用技巧新手教程
前端·npm·node.js