Ayuda con botón :visited

C

Councey #1 Ago '15

Estoy empezando con la programación web y tengo una duda. He conseguido hacer una página web casi en su totalidad (muy simple) con HTML y CSS, he hecho una pequeña barra de navegación vertical que está a la izquierda de la página con ayuda de las listas ( <li> ), le he puesto un background para darle forma de botón y también, que cuando tenga el ratón encima sobre esa lista (o botón) cambie el color (li:hover).

El caso es que estoy intentando hacer que cuando clickee una lista (que a su vez es un panel de navegación) cambie el color del fondo (fácilmente se hace con li:visited) pero por más que lo pongo, no hace nada, no cambia el color. ¿Qué creéis que estoy haciendo mal?

Os dejo el código CSS, no sé por qué no funciona si el hover si lo hace, es simplemente un copypaste de este anterior pero cambiando el color del background.

ESTE FUNCIONA

 .navbar li:hover  {
	
background: grey;
padding: 0.3em;
margin: 0.3em;
border-left: 0.02em solid black;
}

ESTE NO FUNCIONA

.navbar li:visited  {
	
background: greenyellow;
padding: 0.3em;
margin: 0.3em;
border-left: 0.02em solid black;
}

Sin embargo, si hago con a:visited sí funciona, pero no quiero que cambie el color del texto, si no el color del fondo de la lista.

Gracias de antemano.

catalon #2 Ago '15 Inocente

#1 El :visited solo funciona con links que yo sepa.

1 2 respuestas

Tunnecino #3 Ago '15

Eso estaba escribiendo #2, creo que ese selector solo va con anchors. Si lo que quieres es que resalte el elemento en el que has hecho click por ultimo, puedes añadirle una clase active, o algo por el estilo.

2 2 respuestas

Amazon #4 Ago '15 Ramonchu

Eso estaba escribiendo #3 , creo que lo común es ponerle una clase active que se añada con js mismo cuando clicas.

2 1 respuesta

C

Councey #5 Ago '15

#2 #3 #4 Gracias por responder. Es que no me quedan claras algunas cosas aún... ¿entonces no se puede hacer esto que quiero simplemente con CSS?

babri #6 Ago '15

Esto es un poco chapucilla pero te puede servir

HTML

<ul>
  <a href="#"><li><p>Hola Mundo</p></li></a>
  <a href="#"><li><p>Hola Mundo</p></li></a>
</ul>

CSS

ul a:visited li {
  background: red;
}

Te dejo el ejemplo en Codepen.

http://codepen.io/anon/pen/BNbJyW

2 respuestas

Tunnecino #7 Ago '15

#6 A simple vista parece no funcionar, pero por que en realidad están apuntando al mismo sitio xD

1 respuesta

babri #8 Ago '15

#7 miralo en codepen como si funciona lo único que pone los dos en rojo jaja es la primera vez que uso visited la verdad siempre lo hice con js poniendole clases ^^

1 respuesta

Tunnecino #9 Ago '15

#8 Si, a eso mismo me refería, que si apuntan ambos a #, al hacer click en uno, todos se ponen en rojo, y por eso dije que a simple vista parece no funcionar, pero que es por eso.

1 1 respuesta

babri #10 Ago '15

#9 fixed bro! <3

C

Councey #11 Ago '15

#6 Muchas gracias, pero algo estoy haciendo mal aún creo xD, lo he puesto guiándome del código que me has dicho pero aún sigue sin funcionar como quiero hacerlo.

Dejo lo que llevo ahora mismo en codepen, por si así me podéis ayudar mejor: http://codepen.io/anon/pen/qdvpZW

Si seguramente luego cuando me vea JS ni lo necesite, pero quiero trastear bien todo xD

1 respuesta

babri #12 Ago '15

#11 Pon el ul así:

<ul class="navbar">
    <a href="#1"><li>Página principal</li></a>	
    <a href="#2"><li>Panel de control de usuario</li></a>	
    <a href="#3"><li>Más información</li></a>	
    <a href="#4"><li>Prueba</li></a>	
    <a href="#5"><li>Prueba</li></a>	
</ul>

1 1 respuesta