cambio de color del fondo

flagbeer · #1 (**permalink**) 19/04/2009, 14:45

Hola de nuevo:

Trabajo con dreamweaver y cuando se hace un link en un texto, se puede cambiar de color, subrayar, quitar el subrayado etc. todo esto al colocar el mouse sobre el texto.

La pregunta: Como puedo hacer para que cambie el color del fondo del texto?

Gracias y saludos a todos

dART · #2 (**permalink**) 19/04/2009, 15:32

Hola,

Código HTML:

<a href="enlace.html" style="background-color:#000000; color:#FFFFFF; text-decoration:none;">enlace</a>

Daniel Ulczyk · #3 (**permalink**) 19/04/2009, 15:35

Tomando la idea del siguiente ejemplo:

Código html:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title></title>
    <style>
    a:link {
        background: #FFF;
        color: #FFF     
    }
    a:hover {
        background: #000;
        color: #FFF
    }
    </style>
</head>
 
<body>
<a href="#">Demo</a>
</body>
</html>

Con a:link definís la manera en que se ve tu enlace y con a:hover, ante el evento requerido.

sebaweb · #4 (**permalink**) 20/04/2009, 23:43

Código HTML:

<a href="pagina.html" style="background-color:"#000">Link</a>

asi es el codigo. Saludos!!

JUANFM2009 · #5 (**permalink**) 21/04/2009, 09:40

Ojito y rectificarme si lo digo mal. Hover no funciona con IE 6 o inferior..... BENDITO MICROSOFT!!!!

flagbeer · #6 (**permalink**) 22/04/2009, 02:46

Cita:

Iniciado por d-ART

Hola,

Código HTML:

<a href="enlace.html" style="background-color:#000000; color:#FFFFFF; text-decoration:none;">enlace</a>

Buenos días:

He hecho lo que me indicas en el código y no cambia el color del fondo al colocar el ratón sobre el enlace.

Gracias por responder

Dalu2
flagbeer

dART · #7 (**permalink**) 22/04/2009, 06:45

Hola,

Tú pedías soporte sobre cómo cambiar el color de fondo a un enlace, no al pasar el ratón sobre éste.

Prueba usando hojas de estilos. Te pongo un ejemplo:

Código HTML:

<!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=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
a:link{
	/* atributos de css para todos los enlaces de la web */
}

a:visited{
	/* atributos de css para todos los enlaces VISITADOS de la web */
}
a:hover{
	/* atributos de css para todos los enlaces de la web POR DONDE PASEMOS EL RATÓN  */
}
</style>
</head>

<body>
<a href="enlace.html">enlace</a>
</body>
</html>

flagbeer · #8 (**permalink**) 22/04/2009, 08:06

Hola de nuevo:

Con el código que me enió Daniel y D-art funionó, pero le da el mismo argumento a todos los link de la página, por que va colodado entre los <head> </head> y yo lo que quiero es que ese argumento lo tengan unicamente los enlaces del menú y el resto no.

Disculpen mi falta de conocimientos, pero no he estudiado nada del tema de diseño web, como ya lo expliqué antes, en estos temas soy autodidacta.

Salu2
flagbeer

Daniel Ulczyk · #9 (**permalink**) 22/04/2009, 08:39

A ver si esta idea te sirve, entonces:

Código html:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style>
/* resto de los enlaces*/
a:link {
background: transparent;
color: #000000;
}
a:hover {
background: transparent;
color: #FFCC00;
}
/* enlaces para el menu*/
#menu a:link {
background: #FFFFFF;
color: #FFFFFF;
}
#menu a:hover {
background: #000000;
color: #FFFFFF;
}
 
</style>
</head>
<body>
<a href="#">Demo</a>
<div id="menu">
<a href="#">Demo</a>
</div>
</body>
</html>

Si el menú, por ejemplo; lo tenés dentro de DIV (id=menu) podés visualizarlos de otra manera restringiendo esto al correspondiente ID

Suerte!

dART · #10 (**permalink**) 22/04/2009, 11:58

Hola,

También puedes probar así:

Código HTML:

<!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=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
.link:link{
	/* atributos de css para los enlaces con class="link" */
}

.link:visited{
	/* atributos de css para los enlaces con class="link" VISITADOS */
}
.link:hover{
	/* atributos de css para los enlaces con class="link" SOBRE LOS QUE PASEMOS EL RATÓN */
}
</style>
</head>

<body>
<a href="enlace.html" class="link">enlace</a>
</body>
</html>

De esta forma, basta con agregarle la clase link a los enlaces que quieras para que surja efecto el estilo.

Recuerda: <a href="enlace.html" class="link">enlace</a>