gpt4 book ai didi

javascript - 可以手动应用 CSS 类,但 JavaScript 不这样做(真的很奇怪的问题)

转载 作者:行者123 更新时间:2023-11-27 23:55:02 24 4
gpt4 key购买 nike

我的页面顶部有一个导航栏,我可以将悬停效果应用到导航栏上的所有元素上,但上面带有图标的元素除外。

当我在终端中输入代码时,CSS 效果确实出现了,但悬停效果不起作用。此外,使用任何 CSS 伪选择器都没有任何帮助。

<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="C:\Users\Anon\Desktop\CVWebsite\cv.html"><span>Home</span> <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="C:\Users\Anon\Desktop\CVWebsite\cvAbout.html"><span>About</span></a>
</li>
<li> class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span>Portfolio</span>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Professional</a>
<a class="dropdown-item" href="#">Personal</a>
<!-- <div class="dropdown-divider"></div> -->
<!-- <a class="dropdown-item" href="#">Something else here</a> -->
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="C:\Users\Anon\Desktop\CVWebsite\cvContact.html"><span class=""><i class="far fa-paper-plane" style="margin-right: 0.5rem;"></i>Contact</span></a>
</li>
</ul>
var par=document.querySelectorAll(".nav-link");
var partext=document.querySelectorAll(".nav-link span");



for (var j=0;j<par.length;j++){
par[j].addEventListener("mouseenter",function () {
// this.style.backgroundColor= "red";


this.classList.toggle("hoverlendin");
});
par[j].addEventListener("mouseleave",function () {
// this.style.backgroundColor= "red";

this.classList.toggle("hoverlendin");
});
partext[j].addEventListener("mouseenter",function () {
// this.style.backgroundColor= "red";


this.classList.toggle("navlinktext");
});
partext[j].addEventListener("mouseleave",function () {
// this.style.backgroundColor= "red";

this.classList.toggle("navlinktext");
});
.navlinktext{

text-decoration-color: white;
color: white;
font-size: 1.5rem;

}


.hoverlendin{

background-color: lightcoral;

}

Home、About 和 Portfolio 项会按预期更改背景和文本颜色,但 Contact 项仅更改背景,文本保持不变。我做错了什么?

最佳答案

querySelectorAll 计数因第一个元素中 .nav-link 下的两个跨度而变得不匹配。

请在下面找到正确的代码版本。

var par=document.querySelectorAll(".nav-link");
var partext=document.querySelectorAll(".nav-link span");

for (var j=0;j<par.length;j++){
par[j].addEventListener("mouseenter",function () {
// this.style.backgroundColor= "red";


this.classList.toggle("hoverlendin");
});
par[j].addEventListener("mouseleave",function () {
// this.style.backgroundColor= "red";

this.classList.toggle("hoverlendin");
});
partext[j].addEventListener("mouseenter",function () {
// this.style.backgroundColor= "red";


this.classList.toggle("navlinktext");
});
partext[j].addEventListener("mouseleave",function () {
// this.style.backgroundColor= "red";

this.classList.toggle("navlinktext");
});
}
.navlinktext {
text-decoration-color: white;
color: white;
font-size: 1.5rem;
}


.hoverlendin {
background-color: lightcoral;
}
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="C:\Users\Anon\Desktop\CVWebsite\cv.html"><span class="linkSpan">Home <p class="sr-only" style="display:inline-block;margin:0;">(current)</p></span> </a>
</li>
<li class="nav-item">
<a class="nav-link" href="C:\Users\Anon\Desktop\CVWebsite\cvAbout.html"><span class="linkSpan">About</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="linkSpan">Portfolio</span>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Professional</a>
<a class="dropdown-item" href="#">Personal</a>
<!-- <div class="dropdown-divider"></div> -->
<!-- <a class="dropdown-item" href="#">Something else here</a> -->
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="C:\Users\Anon\Desktop\CVWebsite\cvContact.html"><span class="linkSpan"><i class="far fa-paper-plane" style="margin-right: 0.5rem;"></i>Contact</span></a>
</li>
</ul>
</div>

关于javascript - 可以手动应用 CSS 类,但 JavaScript 不这样做(真的很奇怪的问题),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56307507/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com