1

Estoy realizando un menú horizontal y quiero que el campo que se haga click se quede en otro color, estoy usando solo html y css. Hasta ahora solamente consigo que cambie de color si sitúo el cursor sobre el campo en cuestión, pero si lo quito, el marcado se pierde. No consigo dar con algún tutorial ni nada parecido que trate este tema, por lo que me sería de gran ayuda su colaboración.

Os adjunto el HTML y CSS

/*Menú horizontal*/
  .menuhorizontal{
     width: 100%;
     margin: 0px auto;
     background-color: ;
     text-align: center;
  }

  .menuhorizontal ul {
    list-style-type: none;
    display: inline-block;
    background-color: white;
  }

  .menuhorizontal ul li {
    float: left;
    margin-top: 10px;
    font-size: 1.5em;
    padding: 2px;
    margin: 3px;
    border: 1px solid black;
 }

   li {
    font-size: 1.5em;
    padding: 2px;
    margin: 3px;
    border: 2px solid black;
    border-radius: 10px;
  }

 a {
 padding: 5px;
 font-family: "Times New Roman", Times;
 text-decoration: none;
 color: black;
}

 a:hover {
color: red;
}

 li:hover {
  background-color: none;
}

 a:active{
  font-weight: bold;
}
<div class="menuhorizontal">
  <ul>
    <li>
      <a href="index.html">Index</a>
    </li>
    <li>
      <a href="1.html">Quienes Somos</a>
    </li>
    <li>
      <a href="2.html">Nuestras Actvidades</a>
    </li>
    <li>
      <a href="">Contacto</a>
    </li>
  </ul>
</div>

Se agradece cualquier tipo de ayuda

1
  • Te comento que no te van a funcionar las pseudo-clases :active ni :visited, porque con sólo presionar, vas a cambiar de página. Lo más sencillo es crear una clase .active que esté activa (valga la redundancia) en cada ítem del menú de la página en cuestión que estás visitando. Esto puede ser tedioso cuando manejas múltiples páginas y un mismo menú, te recomiendo leas sobre incluir un único template en diferentes páginas.
    – EMCode
    Commented el 4 dic. 2020 a las 14:36

3 respuestas 3

0

prueba con la propiedad "visited" de css

<!DOCTYPE html>
<html>
<head>
<style>

a:link {
  color: red;
}

a:visited {
  color: green;
}

a:hover {
  color: hotpink;
}

a:active {
  color: blue;
}
</style>
</head>
<body>

<a href="#" target="_blank">link</a>
    
</body>
</html>
0

Hola intenta con el atributo de CSS a:active{background-color:green;}

a:active {
  background-color: green;
}
<div class="menuhorizontal">
  <ul>
    <li>
      <a href="index.html">Index</a>
    </li>
    <li>
      <a href="1.html">Quienes Somos</a>
    </li>
    <li>
      <a href="2.html">Nuestras Actvidades</a>
    </li>
    <li>
      <a href="">Contacto</a>
    </li>
  </ul>
</div>

3
  • a:active lo deja de otro color Commented el 3 dic. 2020 a las 20:54
  • a:visited - define el estilo para enlaces visitados a:active - un enlace se convierte en activo una vez que se hace clic en él a:hover - ocurre cuando el ratón está sobre el enlace Commented el 3 dic. 2020 a las 20:55
  • puedes intentar: .menuhorizontal ul li:active{background:red;} y .menuhorizontal ul li:hover{background:red;} Commented el 3 dic. 2020 a las 21:19
0

En cada html puse en su respectivo li a un class="active", por lo que se aplicaría el resaltado en el correspondiente campo.

<div class="menuhorizontal">
      <ul>
        <li>
          <a href="index.html" class="active">Inicio</a>
        </li>
        <li>
          <a href="1.html">Quienes Somos</a>
        </li>
        <li>
          <a href="2.html">Nuestras Actvidades</a>
        </li>
        <li>
          <a href="">Contacto</a>
        </li>
      </ul>
    </div>

    .menuhorizontal{
    width: 100%;
    margin: 0px auto;
    background-color: ;
    text-align: center;
    }

    .menuhorizontal ul {
     list-style-type: none;
     display: inline-block;
     background-color: white;
    }

    .menuhorizontal ul li {
    float: left;
    margin-top: 10px;
    font-size: 1.5em;
    padding: 2px;
    margin: 3px;
    border: 1px solid black;
    }

    li {
    font-size: 1.5em;
    padding: 2px;
    margin: 3px;
    border: 2px solid black;
    border-radius: 10px;
    }

    a {
    padding: 5px;
    font-family: "Times New Roman", Times;
    text-decoration: none;
    color: black;
     }

    a:hover {
    color: red;
     }

    li:hover {
    background-color: none;
     }

    .active {
    font-weight: bold;
    color: red;
     }

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.