在 HTML,CSS,JS 中执行 JS 脚本后如何修复悬停不工作？

Question

我想做一个导航栏。

当页面加载时导航栏工作正常当鼠标悬停在导航选项卡以外时悬停效果有效动画框跟随鼠标并且当鼠标不在导航栏上时框returns到符合预期的顶部 link。

然后我点击不同的导航选项卡，动画框出现在点击的后面 link 但是之后当我将鼠标悬停在其他导航栏上时 links 动画框没有跟随鼠标保持活跃 link.

请运行代码片段以更好地了解问题。当页面首次加载时，将鼠标悬停在 link 上而不是单击其他 link。

导航栏只有在第一次加载页面时才能正常工作。

如果能帮助解决这个问题，我们将不胜感激。

@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
body {
    /*background: #2c3e5e;*/
    background: white;
    font-family: 'Open Sans', sans-serif;
}

/* Navigation Bar */
.navbar {
    position: sticky;
    top: 40px;
}
nav  {
    background-color: #34495e;
    position: relative;
    border-radius: 8px ;
    font-size: 0;
    width: 100px;
    height: 100%;
    margin-top: 0px;
    transition: all 0.2s ease;
}

nav:hover {
    width: 130px;
}

nav a{
    line-height: 50px;
    color: white;
    text-transform: capitalize;
    position : relative;
    z-index: 1;
    text-decoration:none;
    font-size: 15px;
    display: block;
    text-align:center;
}
nav .animation {
    top: 0;
    position:absolute;
    height: 50px;
    width: 100%;
    z-index: 0;
    background: #1abc9c;
    border-radius: 8px 8px 0px 0px;
    transition: all .4s ease 0s;
}
nav #a1:hover~.animation{
    top:0;
    border-radius: 8px 8px 0px 0px;
}
nav #a2:hover~.animation{
    top:50px;
    border-radius: 0px 0px 0px 0px;
}
nav #a3:hover~.animation{
    top:100px;
    border-radius: 0px 0px 8px 8px;
}

/* END of Navigation Bar */

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../css/home.css">
  <title>Home</title>
</head>
<body>
  <!-- Navigation Bar -->
  <nav class="navbar"> 
    <a href="#" id='a1' class="l">BioData</a>
    <a href="#" id='a2' class="l">Acadmics</a>
    <a href="#" id='a3' class="l">Complaints</a>
    <div id='animation' class="animation"></div>
  </nav>
  <script>
    var links = document.getElementsByClassName('l')
    var animation = document.getElementById("animation")
    for (let i = 0; i < links.length; i++) {
      links[i].addEventListener("click", function() {
        animation.style.top = (i * 50) + "px"
        if (i == 0) {
          animation.style.borderRadius = "8px 8px 0px 0px";}
        if (i == 1) {
          animation.style.borderRadius = "0px 0px 0px 0px";}
        if (i == 2) {
          animation.style.borderRadius = "0px 0px 8px 8px";}
      })
    }
  </script>
  <!-- Main Content -->
</body>
</html>

Answer 1

@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
body {
  /*background: #2c3e5e;*/
  background: white;
  font-family: 'Open Sans', sans-serif;
}


/* Navigation Bar */

.navbar {
  position: sticky;
  top: 40px;
}

nav {
  background-color: #34495e;
  position: relative;
  border-radius: 8px;
  font-size: 0;
  width: 100px;
  height: 100%;
  margin-top: 0px;
  transition: all 0.2s ease;
}

nav:hover {
  width: 130px;
}

nav a {
  line-height: 50px;
  color: white;
  text-transform: capitalize;
  position: relative;
  z-index: 1;
  text-decoration: none;
  font-size: 15px;
  display: block;
  text-align: center;
}

nav .animation {
  top: 0;
  position: absolute;
  height: 50px;
  width: 100%;
  z-index: 0;
  background: #1abc9c;
  border-radius: 8px 8px 0px 0px;
  transition: all .4s ease 0s;
}

nav #a1:hover~.animation {
  top: 0;
  border-radius: 8px 8px 0px 0px;
}

nav #a2:hover~.animation {
  top: 50px;
  border-radius: 0px 0px 0px 0px;
}

nav #a3:hover~.animation {
  top: 100px;
  border-radius: 0px 0px 8px 8px;
}


/* END of Navigation Bar */

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./style.css">
  <title>Home</title>
</head>

<body>
  <!-- Navigation Bar -->
  <nav class="navbar">
    <a href="#" id='a1' class="l">BioData</a>
    <a href="#" id='a2' class="l">Acadmics</a>
    <a href="#" id='a3' class="l">Complaints</a>
    <div id='animation' class="animation"></div>
  </nav>
  <script>
    var links = document.getElementsByClassName('l')
    var animation = document.getElementById("animation")
    for (let i = 0; i < links.length; i++) {
      links[i].addEventListener("click", function() {
        animation.style.top = (i * 50) + "px"
        if (i == 0) {
          animation.style.borderRadius = "8px 8px 0px 0px";
        }
        if (i == 1) {
          animation.style.borderRadius = "0px 0px 0px 0px";
        }
        if (i == 2) {
          animation.style.borderRadius = "0px 0px 8px 8px";
        }
      })
      links[i].addEventListener('mouseover', () => {
        animation.style.top = (i * 50) + "px"
        if (i == 0) {
          animation.style.borderRadius = "8px 8px 0px 0px";
        }
        if (i == 1) {
          animation.style.borderRadius = "0px 0px 0px 0px";
        }
        if (i == 2) {
          animation.style.borderRadius = "0px 0px 8px 8px";
        }
      })
    }
  </script>
  <!-- Main Content -->
</body>

</html>

希望这有帮助，我刚刚添加了一个鼠标悬停事件

在 HTML,CSS,JS 中执行 JS 脚本后如何修复悬停不工作？

How to Fix hover not working after JS script executed in HTML,CSS,JS?

html

javascript

css

navigation

sass