Foros del Web » Creando para Internet » CSS »

Cambiar color de fuente al elegir una opción

Estas en el tema de Cambiar color de fuente al elegir una opción en el foro de CSS en Foros del Web. Hola, hice un menú horizontal dónde se muestra una imagen y un texto por cada opción. Al pasar el mouse encima de dicha opción, cambia ...
  #1 (permalink)  
Antiguo 26/02/2010, 05:08
 
Fecha de Ingreso: abril-2005
Mensajes: 475
Antigüedad: 12 años, 8 meses
Puntos: 3
Cambiar color de fuente al elegir una opción

Hola, hice un menú horizontal dónde se muestra una imagen y un texto por cada opción. Al pasar el mouse encima de dicha opción, cambia la imagen y el texto queda con negrita.

No he podido lograr que al ser elegida la opción, la letra quede con otro color, sin embargo la negrita si queda marcada.

Gracias desde ya por las respuestas.
Saludos


Código:
	<div class="menu">
	  <a href="index.php?seccion=inicio&fechaedicion=<?=$fechaedicion?>&bi=<?=$bi?>" <? if($seccion == "inicio") {print "class='actual'";} ?>id="inicio">Inicio</a>	  
	  <a href="index.php?seccion=locales&fechaedicion=<?=$fechaedicion?>&bi=<?=$bi?>" <? if($seccion == "locales") {print "class='actual'";} ?>id="locales">Locales</a>	  
	  <a href="index.php?seccion=nacionales&fechaedicion=<?=$fechaedicion?>&bi=<?=$bi?>" <? if($seccion == "nacionales") {print "class='actual'";} ?>id="nacionales">Nacionales</a>
	  <a href="index.php?seccion=policiales&fechaedicion=<?=$fechaedicion?>&bi=<?=$bi?>" <? if($seccion == "policiales") {print "class='actual'";} ?>id="policiales">Policiales</a>	  
	  <a href="index.php?seccion=deportes&fechaedicion=<?=$fechaedicion?>&bi=<?=$bi?>" <? if($seccion == "deportes") {print "class='actual'";} ?>id="deportes">Deportes</a>
	  <a href="index.php?seccion=sociales&fechaedicion=<?=$fechaedicion?>&bi=<?=$bi?>" <? if($seccion == "sociales") {print "class='actual'";} ?>id="sociales">Sociales</a>
	  <a href="index.php?seccion=funebres&fechaedicion=<?=$fechaedicion?>&bi=<?=$bi?>" <? if($seccion == "funebres") {print "class='actual'";} ?>id="funebres">Fúnebres</a>
	  <a href="index.php?seccion=politica&fechaedicion=<?=$fechaedicion?>&bi=<?=$bi?>" <? if($seccion == "politica") {print "class='actual'";} ?>id="politica">Política</a>
	  <a href="index.php?seccion=rurales&fechaedicion=<?=$fechaedicion?>&bi=<?=$bi?>" <? if($seccion == "rurales") {print "class='actual'";} ?>id="rurales">Rurales</a>
	  <a href="index.php?seccion=cartas&fechaedicion=<?=$fechaedicion?>&bi=<?=$bi?>" <? if($seccion == "cartas") {print "class='actual'";} ?>id="cartas">Cartas</a>
	  <a href="index.php?seccion=columnistas&fechaedicion=<?=$fechaedicion?>&bi=<?=$bi?>" <? if($seccion == "columnistas") {print "class='actual'";} ?>id="columnistas">Columnistas</a>	  
	  <a href="index.php?seccion=varios&fechaedicion=<?=$fechaedicion?>&bi=<?=$bi?>" <? if($seccion == "varios") {print "class='actual'";} ?>id="varios">Varios</a>
	</div>
Código:
.menu a
	{
	display:block;
	background-position:center 5px;
	background-repeat:no-repeat;
	width:80px;
	height:20px;
	float:left;
	font-size:13px;
	color:#FFFFFF;
	text-align:center;
	font-family:Arial;
	text-decoration:none;
	padding:43px 0 0 0;
}
	
.menu .alt { display:none; }
.menu a#inicio { background-image: url(../images/inicio_color.png); background-color:#202020;}
.menu a#locales { background-image: url(../images/locales_blanco.png); background-color:#333333;}
.menu a#nacionales { background-image: url(../images/nacionales_color.png); background-color:#202020;}
.menu a#policiales { background-image: url(../images/policiales_blanco.png); background-color:#333333;}
.menu a#deportes { background-image: url(../images/deportes_color.png); background-color:#202020;}
.menu a#sociales { background-image: url(../images/sociales_blanco.png); background-color:#333333;}
.menu a#funebres { background-image: url(../images/funebres_color.png); background-color:#202020;}
.menu a#politica { background-image: url(../images/politica_blanco.png); background-color:#333333;}
.menu a#rurales { background-image: url(../images/rurales_color.png); background-color:#202020;}
.menu a#cartas { background-image: url(../images/cartas_blanco.png); background-color:#333333;}
.menu a#columnistas { background-image: url(../images/columnistas_color.png); background-color:#202020;}
.menu a#varios { background-image: url(../images/varios_blanco.png); background-color:#333333;}

.menu a:hover {
	font-weight:bold;	
	padding:40px 0 0 0;
	border-bottom-width: 3px;
	border-bottom-style: solid;
}

.menu a#inicio:hover { background-image: url(../images/inicio_blanco.png); border-bottom-color:#F9CD00;}
.menu a#locales:hover {	background-image: url(../images/locales_color.png);	border-bottom-color: #ffffff;}
.menu a#nacionales:hover { background-image: url(../images/nacionales_blanco.png); border-bottom-color:#F9CD00;}
.menu a#policiales:hover { background-image: url(../images/policiales_color.png); border-bottom-color: #ffffff;}
.menu a#deportes:hover { background-image: url(../images/deportes_blanco.png);	border-bottom-color: #F9CD00;}
.menu a#sociales:hover { background-image: url(../images/sociales_color.png); border-bottom-color: #ffffff;}
.menu a#funebres:hover { background-image: url(../images/funebres_blanco.png); border-bottom-color: #F9CD00;}
.menu a#politica:hover { background-image: url(../images/politica_color.png); border-bottom-color: #ffffff;}
.menu a#rurales:hover {	background-image: url(../images/rurales_blanco.png); border-bottom-color: #F9CD00;}
.menu a#cartas:hover { background-image: url(../images/cartas_color.png); border-bottom-color: #ffffff;}
.menu a#columnistas:hover {	background-image: url(../images/columnistas_blanco.png); border-bottom-color: #F9CD00;}
.menu a#varios:hover { background-image: url(../images/varios_color.png); border-bottom-color: #ffffff;}

.actual {
	color:#3300CC;
	font-weight:bold;
}
  #2 (permalink)  
Antiguo 26/02/2010, 13:53
 
Fecha de Ingreso: abril-2005
Mensajes: 475
Antigüedad: 12 años, 8 meses
Puntos: 3
Respuesta: Cambiar color de fuente al elegir una opción

¿Nadie sabe cómo solucionar esto?
  #3 (permalink)  
Antiguo 26/02/2010, 14:15
Avatar de Dnielf  
Fecha de Ingreso: diciembre-2008
Ubicación: 127.0.0.1
Mensajes: 72
Antigüedad: 9 años
Puntos: 14
Respuesta: Cambiar color de fuente al elegir una opción

no entiendo muy bien. Pero podría ser así :

Código:
.menu a:hover {
	font-weight:bold;	
	padding:40px 0 0 0;
	border-bottom-width: 3px;
	border-bottom-style: solid;
        color: /* lo que quieras*/
}
  #4 (permalink)  
Antiguo 26/02/2010, 15:58
 
Fecha de Ingreso: abril-2005
Mensajes: 475
Antigüedad: 12 años, 8 meses
Puntos: 3
Respuesta: Cambiar color de fuente al elegir una opción

Dnielf, gracias por contestar.

En realidad lo que tu me respondiste hace que al pasar el mouse sobre la opción, la fuente tome el color que le indique.
Lo que necesito es, que luego de hacer click en la opción recién tome el color que le indique.
  #5 (permalink)  
Antiguo 27/02/2010, 03:52
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Cambiar color de fuente al elegir una opción

Hola:

Busca información sobre a:active.

Saludos.

  #6 (permalink)  
Antiguo 27/02/2010, 15:34
Avatar de cybernatico  
Fecha de Ingreso: enero-2010
Ubicación: México
Mensajes: 138
Antigüedad: 7 años, 11 meses
Puntos: 6
Respuesta: Cambiar color de fuente al elegir una opción

Puede ser:
menu a:active {color:#cualquiera}
sirve para cambiarle el color en cuanto le das click al enlace
<------------------------------------------------------------->>

o si no:
menu a:visited {color:#cualquiera}
este sirve para cambiar el color cuando ya le diste click, osea cuando ya lo visitaste
<----------------------------------------------------------->>
  #7 (permalink)  
Antiguo 27/02/2010, 17:50
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Cambiar color de fuente al elegir una opción

O también lo podes hacer con javascript.
Si por ejemplo el color de tu enlace es rojo y quieres volverlo azul:

CSS: <style>#mi_id{color:red;}</style>
HTML: <a href="#" id="mi_id" onclick="this.style.color='blue';">soy un enlace</a>

Etiquetas: color, elegir, fuentes
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 21:58.