0

como puedo hacer para que cuando se de clic en una opcion de una lista html se quede el backgroud de un color que resalte sobre las demas opciones, lo he realizado con la propiedad active pero no hace lo que requiero y con la propiedad hover pues si funciona pero solo pasando el mouse por encima pero cuando le doy clic desaparece el backgroud

.enlace > a:hover {
 cursor:pointer;
  background: yellow;
}
<html>
<head>

</head>
<body>
<ul>
  <li class="enlace"><a href="#">Liga 1</a></li>
  <li class="enlace"><a href="#">Liga 2</a></li>
  <li class="enlace"><a href="#">Liga 3</a></li>
  <li class="enlace"><a href="#">Liga 4</a></li>
</ul>
</body>
</html>

4
  • ¿Lo que quieres hacer es sólo resaltar el elemento o seleccionar varios a la vez? Commented el 20 nov. 2017 a las 3:30
  • @alexchvrches solo quiero resaltar el elemento
    – Ivxn
    Commented el 20 nov. 2017 a las 3:42
  • Si estás trabajando con anchors <a> al momento clic, y si la propiedad href está configurada, este te direccionará a otra página, no? Ahora bien, si quieres utilizar de todas formas la lista de anchors con un enlace muerto #, lo adecuado si es utilizar el cambio que te comenta @Andres Alvarez en la respuesta de abajo. Commented el 20 nov. 2017 a las 4:30
  • ¿Que es lo que buscas exactamente? ¿Que se mantenga pulsado hasta que vuelvas a hacer clic sobre otro elemento del menú o, que por el contrario, al hacer clic se pinte y que cuando pulses otro elemento este efecto desaparezca? Si es este último, la solución de @AndrésAlvarez sería lo que buscas. Commented el 20 nov. 2017 a las 11:06

2 respuestas 2

1

Si quieres usar Jquery, podrias hacer lo siguiente,

$("#lista").click(function()
            {
                $("selected#lista").addClass("background:orange");
            })
0

En lugar de usar a:hover usa a:focus porque hover actúa al pasar el puntero del ratón encima de él.

En cambio focus actúa al seleccionar el elemento con el puntero del ratón o por uso del tabulador, pero a su vez pierde la permanencia con sólo pinchar en cualquier parte de la página. Saludos

3
  • 1
    Deberías explicar por qué lo que propones soluciona el problema. Commented el 20 nov. 2017 a las 9:19
  • Deberías explicar en la respuesta (no en los comentarios) por qué lo que propones soluciona el problema. Commented el 27 nov. 2017 a las 7:55
  • Lo tendré en cuenta PaperBirdMaster. Saludos Commented el 27 nov. 2017 a las 16:44

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.