文章/答案/技术大牛

发布

社区首页 >问答首页 >当我悬停到一个红色链接时，链接的颜色和响应性会在我进一步浏览网站时消失。

问当我悬停到一个红色链接时，链接的颜色和响应性会在我进一步浏览网站时消失。
EN

Stack Overflow用户

提问于 2021-03-27 00:45:22

回答 3查看 56关注 0票数 0

我目前正在练习制作一个简单的网站。我的网站上方的导航栏有问题。当我进一步向下滚动我的网站，他们的颜色，当我悬停和他们的反应消失。这是一张照片来帮助你理解我的问题。

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

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>

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

html

css

navbar

回答 3

Stack Overflow用户

回答已采纳

发布于 2021-03-27 02:47:21

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

我在CSS .mt-250中添加了几个类，这将只在元素顶部添加250 40边距，.width-40使元素的宽度占父元素的40%，.left和.right将使元素向左浮动或向右浮动。

删除一些冗余类.gameplay、.agents、.guns、.maps、.shootingRange，并将它们替换为新创建的类。

例如，这一行<div class="mt-250 width-40 right"></div>将意味着这个div的顶部将有一个250 in的边距，宽度为40%，并将向右浮动。

还删除一些冗余it- #paraFirst、#paraSec、#paraThird、#paraFour、#paraFifth和:hover --用一个名为paraheader的新类更改所有这些it，以使所有段落标题保持不变的外观和感觉

注意到，上述所有更改都消除了段落段的冗余，并将行数从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>

票数 1

Stack Overflow用户

发布于 2021-03-27 01:33:30

如果将z-index: 1;添加到.topnav中，您的问题将得到解决。因为，topnav属于topnav之后的其他内容，如文本、锚点est。

票数 0

Stack Overflow用户

发布于 2021-03-27 01:39:40

问题似乎在于肚脐的z指数。向topnav类添加z索引99999，如下所示：

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

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

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

好像是帮我修好的！如果成功的话，请将我的答案标为已解决，如果没有，请告诉我！

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/66826001

复制

相似问题

问当我悬停到一个红色链接时，链接的颜色和响应性会在我进一步浏览网站时消失。
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当我悬停到一个红色链接时，链接的颜色和响应性会在我进一步浏览网站时消失。EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当我悬停到一个红色链接时，链接的颜色和响应性会在我进一步浏览网站时消失。
EN