2. Tech
  3. html: cuando paso el cursor sobre un enlace de color rojo, el color y la capacidad de respuesta del enlace desaparecen cuando de

html: cuando paso el cursor sobre un enlace de color rojo, el color y la capacidad de respuesta del enlace desaparecen cuando de

CorePress2024-01-24  9

Actualmente estoy practicando cómo crear un sitio web sencillo. Tengo un problema en la barra de navegación encima de mi sitio web. Cuando me desplazo hacia abajo en mi sitio web, su color cuando paso el cursor y su capacidad de respuesta desaparecen. Aquí tienes una foto para ayudarte a entender mi problema.

No sé si uso algunos códigos correctamente, pero aquí está mi código, puedes dejar un consejo o también puedes agregar cómo funciona el código para que pueda corregir mi error.

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="https://stackoverflow.com/questions/66826001/Valorant.css">
</head>

<body>
     <!--Navigation Bar here-->
     <img src="https://stackoverflow.com/questions/66826001/images/Valorant.png"> 
    
     <div class="topnav">
        <img src="https://stackoverflow.com/questions/66826001/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="https://stackoverflow.com/questions/66826001/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>

Creo que el nombre de cada párrafo se superpone a los enlaces en la barra de navegación. Gracias por la ayuda, muy apreciada :>



------------------------------------

Puedes lograrloIncluso el mismo aspecto con márgenes en lugar de posición relativa

He agregado algunas clases a su CSS .mt-250 que solo agregarán un margen de 250 px en la parte superior del elemento, .width-40 hará que el ancho del elemento sea el 40% del padre, .left y .right harán que el elemento flotar hacia la izquierda o flotar hacia la derecha

y elimine algunas clases redundantes .gameplay, .agents, .guns, .maps, .shootingRange y reemplácelas con la clase recién creada

por ejemplo, esta línea <div class="mt-250 width-40 right"></div> significará que este div tendrá un margen de 250px en la parte superior y un ancho del 40% y flotará hacia la derecha

También elimine algunos ID redundantes #paraFirst, #paraSec, #paraThird, #paraFour, #paraFifth y :hover cámbielos todos con una única clase nueva llamada paraheaderpara que Constant se vea y se sienta con todos los encabezados de párrafo

tenga en cuenta que todos los cambios anteriores eliminan la redundancia en el estilo en las secciones de Párrafos y reducen el número de líneas de 88 a 15 líneas únicamente, lo que conduce a una carga más rápida en la red real

marcado de trabajo 

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="https://stackoverflow.com/questions/66826001/images/Valorant.png">

<div class="topnav">
  <img src="https://stackoverflow.com/questions/66826001/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="https://stackoverflow.com/questions/66826001/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>



------------------------------------

Si agrega z-index: 1; a .topnav, su problema estará resuelto. Porque topnav se incluye en otros contenidos que vienen después de topnav, como texto, anclaje est.

>p>

------------------------------------

El problema parecía estar en el índice z de la barra de navegación. Agregue un índice z de 99999 a la clase topnav como se hace a continuación:

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

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

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

¡Eso pareció solucionarlo! Si funcionó marca mi respuesta como resuelta y si no ¡avísame!

randomThread
matrices: obtenga las 5 claves/valores más grandes en un objeto Javascriptnode.js: cómo limitar el límite de publicaciones diarias de los usuarios (MERN)Android Studio 4.2: ¿Cómo puedo cambiar el color de fondo del botón elevado en Flutter desde la función?c++ - Uso de std::cin en un bucle while para leer varios números mientras se agregan (el bucle no termina)Función GLSL Pow para dobles¿Están rotas las matemáticas de punto flotante?Cómo solucionar este error de sintaxis de creación de tabla de MySQLpowershell: ¿Por qué pwsh.exe en combinación con Start-Process no acepta un bloque de script directamente?Python: ¿Cómo verifico las variables de entorno para mi usuario específico en Windows 10?php - ¿Cómo utilizar DOM html simple para esta tabla?¿Cómo imprimir la suma de 2 números en MIPS?javascript: ¿Cómo se puede configurar una variable, inicializada fuera de una promesa, desde dentro de la promesa?
Su guía para un futuro mejor - libreflare
Su guía para un futuro mejor - libreflare

Categoría