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

效果图:

相关推荐
前端的日常几秒前
假如要做一个类似 ChatGPT 的聊天 UI,前端如何处理流式响应?
前端
讨厌吃蛋黄酥1 分钟前
🚀 为什么 Node.js 正在告别 CommonJS?一文读懂 JavaScript 模块化的前世今生
前端·javascript
无羡仙1 分钟前
React Hooks 解密:带你玩转现代Web开发的利器
前端
挽淚1 分钟前
从原生 DOM 到 React 的全景剖析
javascript
拾光拾趣录2 分钟前
深入解析 Vue.nextTick 源码:异步更新机制的核心实现
前端·vue.js
摆烂为不摆烂5 分钟前
😁深入JS(三): 一文让你完全了解原型,继承
前端
markyankee1015 分钟前
Vue 指令系统:构建动态界面的核心利器
javascript·vue.js
拾光拾趣录5 分钟前
在 Vue 中使用 SVG 图标
前端·vue.js·svg
吃饭睡觉打豆豆嘛5 分钟前
理解 react 中的受控组件和非受控组件
前端
默默地离开6 分钟前
Web APIs
前端·javascript