CSS a:active no funciona

[juand210]

Buenas, tengo n problema con mi código css, por más que doy vueltas “a:active” no me funcina.

Hover funciona a la perfección, pero cuando le doy clic al botón y actualiza o abre la url vuelve a su estado normal.


Lo que quiero es que se mantenga en el fondo y color activo “azul” del link activo, pero cuando quito el cursor vuelve a gris, el color del link no activo.


El código css que estoy utilizando es el siguiente:

Código:

/*-------columna derecha---------*/

#rightcol ul li
{list-style:none; padding:0px 15px 0px 5px; position:relative;}

#rightcol ul li a
{
text-decoration:none;
padding-left:20px;
padding-top:5px;
background: url(../images/sidenavup.png) no-repeat left center;
display:block;
font: Arial, Helvetica, sans-serif;
color:#666666;
width:150px;
}
/*Sidenav Links*/
#rightcol ul li a:hover
{
text-decoration:none;
padding-left:20px;
padding-top:5px;
background:url(../images/sidenavover.png) no-repeat left center;
display:block;
font: Arial, Helvetica, sans-serif;
color:#0081BF;
}

#rightcol a:active {
text-decoration:none;
padding-left:30px;
padding-top:5px;
padding-bottom:3px;
background: url(../images/sidenavover.png) no-repeat 0px 5px;
border-bottom: 1px solid #cacaca;
display:block;
font: Arial, Helvetica, sans-serif;
color:#666666;
margin:0;
width:150px;
}

#rightcol a.mainlevel:active, #rightcol a.mainlevel-sidenav:active {
text-decoration:none;
padding-left:30px;
padding-top:5px;
padding-bottom:3px;
background:url(../images/sidenavover.png) no-repeat 0px 5px;
display:block;
font: Arial, Helvetica, sans-serif;
color:#0081BF;
width:150px;
}

#rightcol a.mainlevel#active_menu, #rightcol a.mainlevel-sidenav#active_menu-sidenav {
text-decoration:none;
padding-left:30px;
padding-top:1px;
padding-bottom:3px;
background:url(../images/sidenavover.png) no-repeat 0px 5px;
display:block;
font: Arial, Helvetica, sans-serif;
color:#0081BF;
}

#rightcol a.#active_menu:hover, #rightcol a.mainlevel-sidenav#active_menu-sidenav:hover {
text-decoration:none;
padding-left:10px;
padding-top:30px;
padding-bottom:3px;
background: url(../images/sidenavup.png) no-repeat 0px 5px;
border-bottom: 1px solid #cacaca;
display:block;
font: Arial, Helvetica, sans-serif;
color:#666666;
margin:0;
width:150px;

}

#rightcol .inside {
	width:209px;
	padding:0;
	margin:0px 30px 5px 30px;
	position: relative;
}

td#rightcol {
	width:200px;
	margin: 0px;
	padding: 0px;
	background-image: url(../images/modulefade2.png);
	background-repeat: no-repeat;
	background-position: left top;
}

td#rightshadow {
	background-image: url(../images/wrapright.png);
	background-repeat: repeat-y;
	background-position: right bottom;
	margin: 0px;
	padding: 0px;
	width: 5px;
	vertical-align: top;
}

Muchas gracias de antemano.

[maycolalvarez]

active es para cuando lo tienes activo: presionado con el botón o tiene el FOCO
visited es lo que necesitas para los enlaces ya visitados

[juand210]

entiendo, pero lo que necesito es que este de color el enlace en el que se esta en el momento,

es decir, al enlace del menu que se le dio clic que se quede de ese color hasta que se le de clic a otro

[alexk]

juand210 eso tendrias que hacerlo dinamicamente, con php, que al estar en dicha zona cambie la clase, para dar ese efecto. solo con css esto no se puede, pero si tienes un sitio estatico, y con HTML independientes, podrias asignarle una clase y cambiarla en el documento correspondiente... chao!...

[jomaruro]

Hola:

Iniciado por juand210

Código:

#rightcol ul li a:hover
{
text-decoration:none;
padding-left:20px;
padding-top:5px;
background:url(../images/sidenavover.png) no-repeat left center;
display:block;
font: Arial, Helvetica, sans-serif;
color:#0081BF;
}

#rightcol a:active {
text-decoration:none;
padding-left:30px;
padding-top:5px;
padding-bottom:3px;
background: url(../images/sidenavover.png) no-repeat 0px 5px;
border-bottom: 1px solid #cacaca;
display:block;
font: Arial, Helvetica, sans-serif;
color:#666666;
margin:0;
width:150px;
}

Igual me equivoco, pero fíjate en la diferencia entre los dos selectores que te marco en rojo (uno lo declaras directamente, a:active, y el otro ul li a:hover).

El orden de las pseudoclases es :

Código:

a:link
a:visited
a:hover
a:active

Y no veo necesario para nada hacerlo con php. Tienes este ejemplo hecho con CSS por Mikmoro, posiblemente te sirva.

Saludos.

[alexk]

el "a:focus" le podria servir pero no lo sugeri, por que no anda en opera y en crhome... chao y suerte!... en safari y crhome en opera si...

[willyfc]

Pienso que la forma sería esta:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Vinculos activos</title>
<style type="text/css">
body{font-family:Verdana, Arial, Helvetica, sans-serif;}
#menu{width:700px; height:2em; margin:0 auto; border:1px solid #CCC; background:#069; overflow:hidden;}
#menu ul{width:400px; margin:0 auto; list-style:none;}
#menu ul li{float:left;}
#menu a{ font-size:0.8em; font-weight:bold;color:#FFF; text-decoration:none;padding:8px 10px 8px 10px; display:block; border-left:1px solid #333;border-right:1px solid #333;}
#menu a:hover,#menu a:focus,#menu a:active{color:#CCC; text-decoration:underline; display:block;}
#menu a.current{color:#CCC; text-decoration:underline; display:block;}
</style>
</head>

<body>
<div id="menu">
	<ul>
    	<li><a href="#">Menu 1</a></li>
        <li><a href="#" class="current">Menu 2</a></li>
        <li><a href="#">Menu 3</a></li>
        <li><a href="#">Menu 4</a></li>
        <li><a href="#">Menu 5</a></li>
    </ul>
</div>
</body>
</html>

Si estas haciendo una web plana, solo html+css esto te servirá, colocas la clase current en el que tenga que estar activo en ese momento.

Si la web es dinámica necesitaras ayuda de php o asp o lo que estes utilizando para programarla.

Como te digo, todo depende de como este hecha la web, ya nos contarás.

[jomaruro]

Hola:

Iniciado por alexk

el "a:focus" le podria servir pero no lo sugeri, por que no anda en opera y en crhome... chao y suerte!... en safari y crhome en opera si...

y el a:hover no funciona en IE6.

Saludos.

[pzin]

Iniciado por jomaruro

Hola:



y el a:hover no funciona en IE6.

Saludos.

¿Seguro? Según recuerdo yo, que seguramente recuerdo mal, en IE6 la pseudoclase :hover no la reconoce si no es en un elemento A. Es decir, a:hover si lo reconoce, pero div:hover o #algo:hover no.

[ainterfaces]

Ya paso 12 meses desde la pregunta, pero tengo una solución amigo:

Supongamos que tienes la pagina empresa.html y dentro el enlace del menu que dice empresa debe estar marcado, verdad, entonces hacemos lo siguiente

en nuestro html de la pagina empresa.html,

en la etiqueta body
<body id="pagEmpresa"> --- esto exclusivamente en la pagina empresa.html

en la opcion de nuestro menu
<a href="empresa.html" id="btnEmpresa">La empresa</a>

en nuestro css:

pondiamos lo siguiente:

body#pagEmpresa a#btnEmpresa{.....las propiedades y valores.....}

entonces estarías condicionando el estilo solo a la opcion empresa dentro de la pagina de la empresa.

Espero les sirva,