css⿏标悬停下划线_如何使⽤CSS和JavaScript构建下划线悬
停效果
css⿏标悬停下划线
在今天的教程中，我们将使⽤⼀些CSS和JavaScript来创建精美的菜单悬停效果。 这不是复杂的最终结果，但是构建它将是练习我们的前端技能的绝好机会。
在不做进⼀步介绍的情况下，让我们检查⼀下要构建的内容：
标记
我们从⼀些⾮常基本的标记开始； 包含菜单的nav元素和⼀个空的span元素：
<nav class="mynav">
<ul>
<li>
<a href="">Home</a>
</li>
<li>
<a href="">About</a>
</li>
<li>
<a href="">Company</a>
css鼠标点击样式
</li>
<li>
<a href="">Work</a>
</li>
<li>
<a href="">Clients</a>
</li>
<li>
<a href="">Contact</a>
</li>
</ul>
</nav>
<span class="target"></span>
CSS
准备好标记后，接下来我们为相关元素指定⼀些基本样式：
.mynav ul {
display: flex;
justify-content: center;
flex-wrap: wrap;
list-style-type: none;
padding: 0;
}
.mynav li:not(:last-child) {
margin-right: 20px;
}
.mynav a {
display: block;
font-size: 20px;
color: black;
text-decoration: none;
padding: 7px 15px;
}
.target {
position: absolute;
border-bottom: 4px solid transparent;
z-index: -1;
transform: translateX(-60px);
}
.
mynav a,
.target {
transition: all .35s ease-in-out;
}
JavaScript
在这⼀点上，让我们将注意⼒集中在必需JavaScript上。 ⾸先，我们针对所需的元素。 我们还定义了⼀系列颜⾊，将在以后使⽤。
const target = document.querySelector(".target");
const links = document.querySelectorAll(".mynav a");
const colors = ["deepskyblue", "orange", "firebrick", "gold", "magenta", "black", "darkblue"];
⼤事记
接下来，我们监听菜单链接的click和mouseenter事件。
当发⽣click事件时，我们将阻⽌重新加载页⾯。 当然，在我们的情况下，这是可⾏的，因为所有链接都具有空的href属性。 但是，在实际项⽬中，每个菜单链接可能会打开不同的页⾯。
最重要的是，⼀旦mouseenter事件触发，就会执⾏mouseenterFunc回调函数：
for (let i = 0; i < links.length; i++) {
links[i].addEventListener("click", (e) => e.preventDefault());
links[i].addEventListener("mouseenter", mouseenterFunc);
}
mouseenterFunc
mouseenterFunc函数的主体如下所⽰：
function mouseenterFunc() {
for (let i = 0; i < links.length; i++) {
if (links[i].ains("active")) {
links[i].ve("active");
}
links[i].style.opacity = "0.25";
}
this.parentNode.classList.add("active");
this.style.opacity = "1";
const width = BoundingClientRect().width;
const height = BoundingClientRect().height;
const left = BoundingClientRect().left;
const top = BoundingClientRect().top;
const color = colors[Math.floor(Math.random() * colors.length)];
target.style.width = `${width}px`;
target.style.height = `${height}px`;
target.style.left = `${left}px`;
p = `${top}px`;
target.style.borderColor = color;
ansform = "none";
}
在此函数内，我们执⾏以下操作：
1. 将active类添加到⽬标链接的直接⽗级（ li ）。
2. 减少所有菜单链接的opacity ，除了“活动”的链接。
3. 使⽤⽅法检索关联链接的⼤⼩及其相对于视⼝的位置。
4. 从上述数组中获取随机颜⾊，并将其作为值传递给span元素的border-color属性。 请记住，其初始属性值设置为transparent 。
5. 将从getBoundingClientRect⽅法提取的值分配给span元素的相应属性。 换句话说， span标签继承了被悬停的链接的⼤⼩和位置。
6. 重置应⽤于span元素的默认变换。 仅当我们第⼀次将⿏标悬停在链接上时，此⾏为才重要。 在这种情况下，元素的转换从transform:
translateX(-60px)到transform: none 。 这给了我们很好的滑⼊效果。
如果活跃
重要的是要注意，上⾯的代码每次我们将⿏标悬停在链接上时都会执⾏。 因此，当我们将⿏标悬停在“活动”链接上时，它也会运⾏。 为了防⽌这种⾏为，我们将上⾯的代码包装在if语句中：
function mouseenterFunc() {
if (!this.ains("active")) {
// code here
}
}
到⽬前为⽌，我们的演⽰如下：
差不多，但不是很
所以，⼀切似乎都按预期进⾏，对吧？ 嗯，这不是真的，因为如果我们滚动浏览页⾯或调整视⼝的⼤⼩，然后尝试选择链接，事情就会变得混乱。 特别是， span元素的位置变得不正确。
播放 （确保您添加了⾜够的虚拟内容）以了解我的意思。
为了解决这个问题，我们必须计算从窗⼝顶部滚动了多远，然后将此值添加到⽬标元素的当前top值。 以同样的⽅式，我们应该计算出⽂档被⽔平滚动了多少（以防万⼀）。 将结果值添加到⽬标元素的当前left值。
这是我们更新的两⾏代码：
const left = BoundingClientRect().left + window.pageXOffset;
const top = BoundingClientRect().top + window.pageYOffset;
请记住，以上所有代码在浏览器处理DOM并到相关脚本后就⽴即执⾏。 同样，对于您⾃⼰的实现和设计，您可能希望在页⾯加载时或类似的时候运⾏此代码。 在这种情况下，您必须将其嵌⼊事件处理程序（例如， load事件处理程序）中。
视⼝
我们要做的最后⼀件事是确保在调整浏览器窗⼝⼤⼩时该效果仍然有效。 为此，我们监听resize事件并注册resizeFunc事件处理程序。window.addEventListener("resize", resizeFunc);
这是此处理程序的主体：
function resizeFunc() {
const active = document.querySelector(".mynav li.active");
if (active) {
const left = BoundingClientRect().left + window.pageXOffset;
const top = BoundingClientRect().top + window.pageYOffset;
target.style.left = `${left}px`;
p = `${top}px`;
}
}
在上⾯的函数中，我们执⾏以下操作：
1. 检查是否有⼀个菜单列表项，其类别为active 。 如果有这样的元素，即国家，我们已经⿏标悬停在某个链接。
2. 获取“活动”项的新left ， top属性以及相关的窗⼝属性，并将它们分配给span元素。 请注意，我们仅检索在resize事件期间更改的属
性的值。 这意味着，⽆需重新计算菜单链接的宽度和⾼度。
浏览器⽀持
该演⽰在所有最新的浏览器中都能正常运⾏。 如果您遇到任何问题，请在下⾯的评论中告诉我。 另外，您可能已经注意到，我们使⽤将我们的ES6代码编译为ES5。
结论
在本教程中，我们经历了创建简单但有趣的菜单悬停效果的过程。
希望您喜欢我们在此处构建的内容，并从中得到启发，开发出更强⼤的菜单效果，例如（在撰写本⽂时） ⽹站中出现的菜单效果。
您是否创建过类似的作品？ 如果是这样，请务必与我们分享您⾯临的挑战。
翻译⾃:
css⿏标悬停下划线

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。