鼠标悬停下划线显示特效,html鼠标悬停显示下划线

鼠标悬停下划线显示特效,html鼠标悬停显示下划线html:(index.html)<!DOCTYPEhtml><htmllang=”en”><head><metacharset=”UTF-8″><title>鼠标悬停下划线</title><linkrel=”stylesheet”href=”css/style.css”>&l…

大家好,又见面了,我是你们的朋友全栈君。

html:

(index.html)

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>鼠标悬停下划线</title>

<link rel="stylesheet" href="css/style.css">

</head>
<body>

<nav>
<a href="#">首页</a>
<a href="#">产品展示</a>
<a href="#">新闻资讯</a>
<a href="#">关于我们</a>
</nav>

<script  src="js/index.js"></script>

</body>
</html>

css3:

(style.css)

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #f8f8f8;
  font: normal 400 130%/1.5 -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
}

nav {
  display: grid;
  grid-auto-flow: column;
  grid-gap: 1em;
}

a {
  position: relative;
  font-weight: 600;
  text-decoration: none;
  color: rgba(0, 0, 0, 0.4);
  transition: color .3s ease;
}
a::after {
  --scale: 0;
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 3px;
  background: #4c81c9;
  -webkit-transform: scaleX(var(--scale));
          transform: scaleX(var(--scale));
  -webkit-transform-origin: var(--x) 50%;
          transform-origin: var(--x) 50%;
  transition: -webkit-transform 0.3s cubic-bezier(0.535, 0.05, 0.355, 1);
  transition: transform 0.3s cubic-bezier(0.535, 0.05, 0.355, 1);
  transition: transform 0.3s cubic-bezier(0.535, 0.05, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.535, 0.05, 0.355, 1);
}
a:hover {
  color: #4c81c9;
}
a:hover::after {
  --scale: 1;
}

js代码段:

(index.js)

document.querySelectorAll('a').forEach(elem => {

  elem.onmouseenter =
  elem.onmouseleave = e => {

    const tolerance = 5;

    const left = 0;
    const right = elem.clientWidth;

    let x = e.pageX - elem.offsetLeft;

    if (x - tolerance < left) x = left;
    if (x + tolerance > right) x = right;

    elem.style.setProperty('--x', `${x}px`);

  };

});

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/145981.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • https和http有哪些区别「建议收藏」

    https和http有哪些区别「建议收藏」什么是HTTPS?HTTPS的全称是超文本传输安全协议(HypertextTransferProtocolSecure),是一种网络安全传输协议。在HTTP的基础上加入SSL/TLS来进行数据加密,保护交换数据不被泄露、窃取。通俗的来说,就是:当你登陆一个有网站的网页时形成,在填写该表格并点击“提交”后,您输入的信息可能被黑客截获不安全网站。这些信息可以是银行交易的详细信…

    2022年10月17日
  • matlab如何取模_matlab取模运算

    matlab如何取模_matlab取模运算mod函数采用floor,rem函数采用fix函数。那么什么是floor和fix?fix(x):截尾取整。如:>>fix([3.4,-3.4])ans=3-3floor

  • 具有指令流水线结构的cpu_cpu流水线技术

    具有指令流水线结构的cpu_cpu流水线技术为什么小小一个CPU,有那么多周期(Cycle)?程序的性能,是由三个因素相乘来衡量的,“指令数×CPI×时钟周期”。和周期相关的只有一个时钟周期,即CPU主频的倒数。一个CPU的时钟周期可以认为是可以完成一条最简单的计算机指令的时间。那为何构造CPU时,有那么多周期?单指令周期处理器一条CPU指令的执行,由FDE三步组成。这个执行过程,至少需花费一个时钟周期。因为在取指令的时候,我们需要通过时钟周期的信号,来决定计数器的自增。很自然,我们希望能确保让这样一整条指令的执行,在一个时钟周期内完成

  • socket常用函数_socket recv函数

    socket常用函数_socket recv函数摘要在linux下,使用socketpair函数能够创建一对套节字进行进程间通信(IPC)。函数原形:#include&lt;sys/types.h&gt;#include&lt;sys/socket.h&gt;intsocketpair(intdomain,inttype,intprotocol,intsv[2]);参数1(domain):表示协…

    2022年10月14日
  • 图片和Base64编码相互转换[通俗易懂]

    图片和Base64编码相互转换[通俗易懂]https://www.cnblogs.com/hzhl/articles/14919747.html

  • 《JavaScript 模式》读书笔记(7)— 设计模式3「建议收藏」

    这一篇,我们学习本篇中最为复杂的三个设计模式,代理模式、中介者模式以及观察者模式。这三个模式很重要!!七、代理模式在代理设计模式中,一个对象充当另一个对象的接口。它与外观模式的区别之处在于,外观模

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号