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

效果图:

相关推荐
枷锁—sha2 分钟前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha3 分钟前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
心情好的小球藻11 分钟前
Python应用进阶DAY9--类型注解Type Hinting
开发语言·python
群联云防护小杜19 分钟前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
惜.己23 分钟前
使用python读取json数据,简单的处理成元组数组
开发语言·python·测试工具·json
Y40900129 分钟前
C语言转Java语言,相同与相异之处
java·c语言·开发语言·笔记
DanB2432 分钟前
html复习
javascript·microsoft·html
汉得数字平台37 分钟前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹44 分钟前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_6 小时前
XSS(跨站脚本攻击)
前端·网络·xss