当我将鼠标悬停在红色的 link 上时，link 的颜色和响应性在我进一步向下浏览网站时消失

Question

我目前正在练习制作一个简单的网站。我网站上方的导航栏有问题。当我进一步向下滚动我的网站时，当我悬停时它们的颜色和它们的响应消失了。这是一张图片，可以帮助您理解我的问题。

我不知道我是否正确使用了一些代码，但这是我的代码，您可以留下提示，或者您也可以添加代码的工作原理，以便我纠正我的错误。

html,body{
    height: 163%;
}

body{
    background: rgba(236,232,225,255);
    color: #333;
    font-family: helvetica;
    font-size: 15px;
    line-height: .5cm;

    margin: 0;
    padding: 0;
}

/* links configuration here */
a{
    text-decoration: none;
}

a:hover{
    color:rgba(216, 108, 108, 0.932);
}
/* links configuration ends here */

.whole{
    margin-left: 50px;
    margin-right: 50px;
    font-size: 15px;
}

#webname{ /* heading here */
    margin-top: 17%;
    margin-bottom: 17%;
    
    text-align: center;
    font-size: 150px;
    font-family: VALORANT;
    color:white;
}

#webname:hover{
    color: rgba(216, 110, 110, 0.933);
    cursor: default;
}

.topnav {
    position: fixed;
    overflow: hidden;
    background-color: #333;

    padding-top: 10px;
    padding-bottom: 10px;
    
    top: 0;
    width: 100%;
}

.topnav a{
    color: white;
    padding-top: 15px;
    padding-left: 25px;
    padding-right: 5px;

    float: left;
    font-family: VALORANT;
    font-size: 25px;

    display: block;
}

.topnav a:hover{
    color: rgba(216, 108, 108, 0.932);
}

.topnav img{
    float: right;
    padding-right: 15px;
}

#videoBG{ /* background vid */
    position: absolute;
    right: 0; 
    bottom: 30%;
    min-width: 100%; 
    min-height: 100%;
    width: auto; 
    height: auto; 
    z-index: -100;
    background-size: cover;
    overflow: hidden;
}

/* Paragraphs starts here */

.gameplay{ /* First Paragraph here */
    margin-top: 10px;
    
    width: 30%;
    float: left; 
}

#paraFirst {
    font-family: VALORANT;
    font-size: 30px;
    width: 38%;
}
#paraFirst:hover{
    color: rgba(216, 108, 108, 0.932);
    cursor: default;
}

.agents{ /* Second Paragraph here */
    position: relative;
    top: 250px;

    float: right;
    width: 40%;
}

#paraSec{
    font-family: VALORANT;
    font-size: 30px;
    width: 20%;
}
#paraSec:hover{
    color: rgba(216, 108, 108, 0.932);
    cursor: default;
}

.guns{
    position: relative;
    top: 370px;

    float: left;
    width: 40%;
}

#paraThird{
    font-family: VALORANT;
    font-size: 30px;
    width: 14%;
}
#paraThird:hover{
    color: rgba(216, 108, 108, 0.932);
    cursor: default;
}

.maps{
    position: relative;
    top: 780px;

    float: right;
    width: 40%;
}

#paraFour{
    font-family: VALORANT;
    font-size: 30px;
    width: 14%;
}
#paraFour:hover{
    color: rgba(216, 108, 108, 0.932);
    cursor: default;
}

.shootingRange{
    position: relative;
    top: 850px;

    float: left;
    width: 40%;
}

#paraFifth{
    font-family: VALORANT;
    font-size: 30px;
    width: 50%;
}
#paraFifth:hover{
    color: rgba(216, 108, 108, 0.932);
    cursor: default;
}

@media (min-aspect-ratio: 16/9){
    #videoBG{
        width: 100%;
        height: auto;
    }
}

@media (max-aspect-ratio: 16/9){
    #videoBG{
        width: auto;
        height: 100%;
    }
}

@media (max-width: 767px){
    #videoBG{
        display: none;
    }

    body {
        background: url('valoClip.png');
        background-size: cover;
    }
}

@font-face {
    font-family: 'VALORANT';
    src: url(fonts/Valorant\ Font.ttf);
    font-style: normal;
}

<!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">
    
    <title>Valorant</title>
    <link rel="stylesheet" href="Valorant.css">
</head>

<body>
     <!--Navigation Bar here-->
     <img src="images/Valorant.png"> 
    
     <div class="topnav">
        <img src="images/Valorant.png"> 
        <a href="#">Home</a>
        <a href="#">Gameplay</a>
        <a href="#">About</a>
        <a href="#">Guides</a>
    </div>
    
    <!--Title-->
    <h1 id="webname">valoraNt</h1>
    
    <div class="wrapper">
        <video id="videoBG" poster="valoClip.png" autoplay muted loop>
            <source src="valoClip.mp4" type="video/mp4">
        </video>

    </div>

    <!--Gameplay here-->
<div class="whole">    
    <div class="gameplay">
        
    <h3 id="paraFirst">GAMEPLAY</h3>
    
    <p>
    Valorant is an online <abbr title="First Person Shooter">FPS</abbr> game that defy the limits.
    Blend your style and experience on a global, competitive stage. The game has 13 rounds to attack
    and defend your side using sharp gunplay and tactical abilities. And, with one life per-round,
    you'll need to think faster than your opponent if you want to survive. Take on foes across
    Competitive and Unranked modes as well as Deathmatch and Spike Rush. There is also a Practice
    mode or tool to help you manage your aim.
    </p>

    <p><a href="https://www.youtube.com/watch?v=e_E9W2vsRbQ" target="_blank"> Watch the trailer here</a></p>
    </div>

    <!--Agents here-->
    <div class="agents">
    <h3 id="paraSec">AGENTS</h3>

    <p>
        Valorant is a 5v5 tactical shooter where each player plays as a character called an "agent".
        <br>
        <br>
        There are currently 15 agents in the game; Astra, Breach, Brimstone, Cypher, Jett, Killjoy,
        Omen, Phoenix, Raze, Reyna, Sage, Skye, Sova, Viper, Yoru.
    </p>

    <p>
        Each agent has four unique abilities (including ultimate).
        <br>
        <br>
        So far, the agent abilities range from traditional utility from realistic shooter such as
        flasbangs and smoke granades but also include magical or futuristic themed abilities like
        conjuring walls and sonic arrows that act like a radar.
        <br>
        <br>
        There are some agents that will be available for new accounts while other agents have to be
        unlocked through progression or battle pass system.
    </p>
    </div>

    <!--Guns here-->
    <div class="guns">
    <h3 id="paraThird">GUNS</h3>

    <p>
        Valorant has a buy phase at the beginning of each round. Every agent has access to the same
        guns and shields in their shop.
        <br>
        <br>
        There are currently 17 guns in valorant; Classic, Shorty, Frenzy, Ghost, Sheriff, Stinger,
        Spectre, Bucky, Judge, Marshal, Operator, Ares, Odin, Bulldog, Guardian, Phantom, Vandal.
    </p>

    <p>
        Every agent has a primary weapon slot (SMGs, Shotguns, Snipers, and Heavy Machine Guns),
        a secondary sidearm slot, and a knife.
        <br>
        <br>
        During the buy phase, players can sell their sidearm or primary, request a teammate to buy a gun
        for them if they're low on funds, announce that they have extra funds to purchase for a teammate,
        or tell them to save their money for the round.
    </p>

    <p>
        Guns vary in terms of:
        <ul>
            <li>Primary and alt fire settings</li>
            <li>Damage output (based on head/body/legs)</li>
            <li>Magazine capacity</li>
            <li>Recoil pattern</li>
            <li>Ability to pierce through walls</li>
        </ul>
    </p>
    </div>

    <!--Maps here-->
    <div class="maps">
    <h3 id="paraFour">MAPS</h3>

    <p>
        So far there are 5 maps with one objective: planting or defending against a bomb called "spike".
        <br>
        <br>
        The 5 playable maps are:
        <ul>
            <li>Bind</li>
            <li>Haven</li>
            <li>Split</li>
            <li>Ascent</li>
            <li>Icebox</li>
        </ul>
    </p>

    <p>
        Each map also has two ultimate orbs in neutral locations that teams can try to grab.
        The orb grants one point the ulimate of the agent who picked it up.
        <br>
        <br>
        Another general thing to note is that some walls and terrain can be fired through. As a rule
        of thumb, anything that leaves a bullter hole can be penetrated.
    </p>
    </div>

    <!--Shooting Range here-->
    <div class="shootingRange">
    <h5 id="paraFifth">SHOOTING RaNGE</h5>
    <p>
        The last existing map is dedicated to practicing and honing your skills. Here you can
        change your agent and guns at anytime (you can even teset characters that you do not own yet).
        <br>
        <br>
        At the shooting range, you can shoot at dummies that spawn at different speeds and settings such
        as strafing.
        <br>
        <br>
        There is also an area dedicated to shooting long-distance targets to test the effective range of
        guns.
        <br>
        <br>
        Lastly, you can also practice scenarios such as planting a spike and then defending against bots
        to improve your composure and ability in clutch situations.
    </p>
    </div>
</div>


</body>
</html>

我认为每个段落的名称都与导航栏中的链接重叠。感谢您的帮助，非常感谢：>

Answer 1

如果您将z-index: 1;添加到.topnav，您的问题将得到解决。因为，topnav 属于 topnav 之后的其他内容，例如 text，anchor est.

Answer 2

问题似乎出在导航栏的 z-index 上。将 99999 的 z-index 添加到顶部导航 class，如下所示：

.topnav {
    position: fixed;
    overflow: hidden;
    background-color: #333;

    padding-top: 10px;
    padding-bottom: 10px;

    top: 0;
    width: 100%;
    z-index: 99999999;
}

这似乎为我解决了这个问题！如果有效，请将我的答案标记为已解决，如果无效，请告诉我！

Answer 3

您可以使用边距而不是相对位置来实现相同的外观

我已经在你的 CSS .mt-250 中添加了一些 class 元素，它只会在元素顶部添加 250px 边距，.width-40 使元素的宽度为 40 parent、.left 和 .right 的百分比将使元素向左浮动或向右浮动

并删除一些多余的class .gameplay, .agents, .guns, .maps, .shootingRange 并替换为新建的class

例如，这条线 <div class="mt-250 width-40 right"></div> 意味着这条线 div 顶部有 250 像素的边距，宽度为 40%，并且会向右浮动

也删除了一些多余的ID #paraFirst, #paraSec, #paraThird, #paraFour, #paraFifth 并且:hover全部改变使用一个名为 paraheader 的新 class 使所有段落 headers

的外观保持不变

请注意所有上述更改消除了段落部分的样式冗余，并将行数从 88 行减少到仅 15 行，这导致在真实网络上的加载速度更快

工作标记

html,
body {
  height: 163%;
}

body {
  background: rgba(236, 232, 225, 255);
  color: #333;
  font-family: helvetica;
  font-size: 15px;
  line-height: .5cm;
  margin: 0;
  padding: 0;
}


/* links configuration here */

a {
  text-decoration: none;
}

a:hover {
  color: rgba(216, 108, 108, 0.932);
}


/* links configuration ends here */

.whole {
  margin-left: 50px;
  margin-right: 50px;
  font-size: 15px;
}

#webname {
  /* heading here */
  margin-top: 17%;
  margin-bottom: 17%;
  text-align: center;
  font-size: 150px;
  font-family: VALORANT;
  color: white;
}

#webname:hover {
  color: rgba(216, 110, 110, 0.933);
  cursor: default;
}

.topnav {
  position: fixed;
  overflow: hidden;
  background-color: #333;
  padding-top: 10px;
  padding-bottom: 10px;
  top: 0;
  width: 100%;
}

.topnav a {
  color: white;
  padding-top: 15px;
  padding-left: 25px;
  padding-right: 5px;
  float: left;
  font-family: VALORANT;
  font-size: 25px;
  display: block;
}

.topnav a:hover {
  color: rgba(216, 108, 108, 0.932);
}

.topnav img {
  float: right;
  padding-right: 15px;
}

#videoBG {
  /* background vid */
  position: absolute;
  right: 0;
  bottom: 30%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  background-size: cover;
  overflow: hidden;
}


/* Paragraphs starts here */

.mt-250 {  margin-top: 250px}
.left {float: left}
.right { float: right}
.width-40 {width: 40%;}

.paraheader{
  font-family: VALORANT;
  font-size: 30px;
  width: 38%;
}

.paraheader:hover {
  color: rgba(216, 108, 108, 0.932);
  cursor: default;
}

   

@media (min-aspect-ratio: 16/9) {
  #videoBG {
    width: 100%;
    height: auto;
  }
}

@media (max-aspect-ratio: 16/9) {
  #videoBG {
    width: auto;
    height: 100%;
  }
}

@media (max-width: 767px) {
  #videoBG {
    display: none;
  }
  body {
    background: url('valoClip.png');
    background-size: cover;
  }
}

@font-face {
  font-family: 'VALORANT';
  src: url(fonts/Valorant\ Font.ttf);
  font-style: normal;
}

<!--Navigation Bar here-->
<img src="images/Valorant.png">

<div class="topnav">
  <img src="images/Valorant.png">
  <a href="#">Home</a>
  <a href="#">Gameplay</a>
  <a href="#">About</a>
  <a href="#">Guides</a>
</div>

<!--Title-->
<h1 id="webname">valoraNt</h1>

<div class="wrapper">
  <video id="videoBG" poster="valoClip.png" autoplay muted loop>
            <source src="valoClip.mp4" type="video/mp4">
        </video>

</div>

<!--Gameplay here-->
<div class="whole">
  <div class="left width-40">

    <h3 class="paraheader">GAMEPLAY</h3>

    <p>
      Valorant is an online <abbr title="First Person Shooter">FPS</abbr> game that defy the limits. Blend your style and experience on a global, competitive stage. The game has 13 rounds to attack and defend your side using sharp gunplay and tactical
      abilities. And, with one life per-round, you'll need to think faster than your opponent if you want to survive. Take on foes across Competitive and Unranked modes as well as Deathmatch and Spike Rush. There is also a Practice mode or tool to help
      you manage your aim.
    </p>

    <p><a href="https://www.youtube.com/watch?v=e_E9W2vsRbQ" target="_blank"> Watch the trailer here</a></p>
  </div>

  <!--Agents here-->
  <div class="right mt-250 width-40">
    <h3 class="paraheader">AGENTS</h3>

    <p>
      Valorant is a 5v5 tactical shooter where each player plays as a character called an "agent".
      <br>
      <br> There are currently 15 agents in the game; Astra, Breach, Brimstone, Cypher, Jett, Killjoy, Omen, Phoenix, Raze, Reyna, Sage, Skye, Sova, Viper, Yoru.
    </p>

    <p>
      Each agent has four unique abilities (including ultimate).
      <br>
      <br> So far, the agent abilities range from traditional utility from realistic shooter such as flasbangs and smoke granades but also include magical or futuristic themed abilities like conjuring walls and sonic arrows that act like a radar.
      <br>
      <br> There are some agents that will be available for new accounts while other agents have to be unlocked through progression or battle pass system.
    </p>
  </div>

  <!--Guns here-->
  <div class="left mt-250 width-40">
    <h3 class="paraheader">GUNS</h3>

    <p>
      Valorant has a buy phase at the beginning of each round. Every agent has access to the same guns and shields in their shop.
      <br>
      <br> There are currently 17 guns in valorant; Classic, Shorty, Frenzy, Ghost, Sheriff, Stinger, Spectre, Bucky, Judge, Marshal, Operator, Ares, Odin, Bulldog, Guardian, Phantom, Vandal.
    </p>

    <p>
      Every agent has a primary weapon slot (SMGs, Shotguns, Snipers, and Heavy Machine Guns), a secondary sidearm slot, and a knife.
      <br>
      <br> During the buy phase, players can sell their sidearm or primary, request a teammate to buy a gun for them if they're low on funds, announce that they have extra funds to purchase for a teammate, or tell them to save their money for the round.
    </p>

    <p>
      Guns vary in terms of:
      <ul>
        <li>Primary and alt fire settings</li>
        <li>Damage output (based on head/body/legs)</li>
        <li>Magazine capacity</li>
        <li>Recoil pattern</li>
        <li>Ability to pierce through walls</li>
      </ul>
    </p>
  </div>

  <!--Maps here-->
  <div class="right mt-250 width-40">
    <h3 class="paraheader">MAPS</h3>

    <p>
      So far there are 5 maps with one objective: planting or defending against a bomb called "spike".
      <br>
      <br> The 5 playable maps are:
      <ul>
        <li>Bind</li>
        <li>Haven</li>
        <li>Split</li>
        <li>Ascent</li>
        <li>Icebox</li>
      </ul>
    </p>

    <p>
      Each map also has two ultimate orbs in neutral locations that teams can try to grab. The orb grants one point the ulimate of the agent who picked it up.
      <br>
      <br> Another general thing to note is that some walls and terrain can be fired through. As a rule of thumb, anything that leaves a bullter hole can be penetrated.
    </p>
  </div>

  <!--Shooting Range here-->
  <div class="left mt-250 width-40">
    <h5 class="paraheader">SHOOTING RaNGE</h5>
    <p>
      The last existing map is dedicated to practicing and honing your skills. Here you can change your agent and guns at anytime (you can even teset characters that you do not own yet).
      <br>
      <br> At the shooting range, you can shoot at dummies that spawn at different speeds and settings such as strafing.
      <br>
      <br> There is also an area dedicated to shooting long-distance targets to test the effective range of guns.
      <br>
      <br> Lastly, you can also practice scenarios such as planting a spike and then defending against bots to improve your composure and ability in clutch situations.
    </p>
  </div>
</div>

当我将鼠标悬停在红色的 link 上时，link 的颜色和响应性在我进一步向下浏览网站时消失

When I hover to a link with color red, The color and responsiveness of the link disappears when I go further down the website

html

css

navbar

工作标记