CSS 类可以手动应用，但 JavaScript 不这样做（真是奇怪的问题）

Question

我的页面顶部有一个导航栏，我可以将悬停效果应用于导航栏上的所有项目，但上面有图标的项目除外。

当我在终端中输入代码时，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 项目仅更改背景，文本保持不变。我做错了什么？

Answer 1

由于第一个元素中 .nav-link 下的两个跨度，

querySelectorAll 计数不匹配。

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

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>