鼠标悬停下划线显示特效,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)


相关推荐

  • 迭代法求行列式(线性代数公式)

    线性代数行列式计算之迭代法声明与简介线性代数行列式计算之迭代法是利用行列式逐阶展开式会发现或总结出n阶和n-1阶、n-2阶以及剩余阶的关系式,进而推算出整个行列式的最终结果。比如可以由或反过来(),总之能找出一个逐级演变的推导关系式。迭代法又称之为递推法。迭代法正向迭代根据给的行列式可以直观的找出n阶和n-1阶的关系式,这种方法叫做直接迭代法。详见如下示例:计算n阶行列式:#1思路Step1先观察行列式的特点,再整理思路Step2如果我们对第…

  • pyzharm激活码_通用破解码

    pyzharm激活码_通用破解码,https://javaforall.cn/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

  • python处理fasta文件_fast ai forum

    python处理fasta文件_fast ai forumPython之fastai:fastai库的简介、安装、使用方法之详细攻略目录fastai库的简介fastai库的安装fastai库的使用方法1、计算机视觉分类2、计算机视觉分割fastai库的简介Fastai使用现代最佳实践简化了快速和准确的神经网络训练。fastai是一个深度学习库,它为从业者提供高级组件,可以快速轻松地在标准深度学习领域提供最先进的结果,并为研究人员提供可以混合和匹配构建的低级组件新方法。它旨在做到这两件事…

  • TypeError: ‘Collection‘ object is not callable. If you meant to call the ‘insert‘ method on a ‘Datab

    TypeError: ‘Collection‘ object is not callable. If you meant to call the ‘insert‘ method on a ‘DatabfrompymongoimportMongoClient报错问题描述解决方法问题描述使用pymongo连接本地的MongoDB,跟个老师的视频,出现报错,后查询资料改正frompymongoimportMongoClient#创建数据库连接对象client=MongoClient()#选择一个数据库db=client[‘python’]#身份认证#db.authenticate(‘python’,’python’)#选择一个集合col=c

  • lmdb转换「建议收藏」

    lmdb转换「建议收藏」一、LMDB介绍:lmdb数据库LMDB全称为LightningMemory-MappedDatabase,就是非常快的内存映射型数据库,LMDB使用内存映射文件,可以提供更好的输入/输出性能,对于用于神经网络的大型数据集(比如ImageNet),可以将其存储在LMDB中。LMDB属于key-value数据库,而不是关系型数据库(比如MySQL),LMDB提供key-value存储,其中每个键值对都是我们数据集中的一个样本。LMDB的主要作用是提供数据管理,可以将各种

  • java map转json字符_Map转JSON字符串

    java map转json字符_Map转JSON字符串[java]代码库packagecom.smartAnji.control.utils;importjava.util.HashMap;publicclassMessageUtil{publicfinalstaticStringTYPE=”type”;publicfinalstaticStringDATA=”data”;publicfinalstaticSt…

发表回复

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

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