Cambio de color de fondo en links

[aguila_393]

Estoy tratando de lograr un efecto similar al que tiene facebook al situar el puntero sobre la palabra Facebook o cualquiera de los textos o iconos que se encuentran en la barra superior de la pagina.

Al poner el cursor inmediamente cambia de color el fondo del div donde se encuentra el link. No deberia ser muy complicado de hacer pero no logro hacerlo. Alguien podria darme una mano?

[jokerwin]

Te daría un código que hace ese mismo efecto, pero lo pegarías para lo que quieres y no aprenderías, mejor te digo que ese evento se llama :hover y se lo aplica a una clase CSS para que cuando se sitúe el puntero por sobre la clase, se pueda cambiar sus propiedas como ser el background en este caso. Esta explicación sencilla la debes ampliar para que lo puedas hacer vos mismo.

[aguila_393]

Iniciado por jokerwin

Te daría un código que hace ese mismo efecto, pero lo pegarías para lo que quieres y no aprenderías, mejor te digo que ese evento se llama :hover y se lo aplica a una clase CSS para que cuando se sitúe el puntero por sobre la clase, se pueda cambiar sus propiedas como ser el background en este caso. Esta explicación sencilla la debes ampliar para que lo puedas hacer vos mismo.

Lo estoy haciendo usando a:hover { background-color : el color que elija }

Pero eh visto webs en las que no vi que hayan usado el hover y sin embargo se hace el efecto igual. Tenes idea alguna otra manera de hacerlo?

[jokerwin]

Si, con javascript podés cambiar propiedades CSS. Y la función lo lográs con el evento onmouseover que va en la etiqueta; por ejemplo:

Código CSS:

input {background-color:White;}
div:hover input {background-color:Blue;}
 

es equivalente a:

Código HTML:

<div onmouseover="document.getElementById('input').style.backgroundColor='Blue';">
<input id="input">
</div>
 

Puedes ver más de esto: http://stackoverflow.com/questions/608788/css-hover-vs-javascript-mouseover

[pedrogp9693]

Iniciado por aguila_393

Lo estoy haciendo usando a:hover { background-color : el color que elija }

Pero eh visto webs en las que no vi que hayan usado el hover y sin embargo se hace el efecto igual. Tenes idea alguna otra manera de hacerlo?

El problema es que usas el a:hover, y solo cambiaría el color de fondo de las letras, mételo dentro de un div flotado o tabla o lo que sea que sea bloque, no que solo marque el texto

[aguila_393]

La web a la que me refiero es esta:

http://frasesinolvidabless.com.ar/

Estuve mirando el css y no vi que haya usado el hover, ni tampoco usa js. Me pase algun elemento por arriba o como es que lo hace?

[jokerwin]

Si ocupa :hover (http://frasesinolvidabless.com.ar/css/stylesN.css línea 11). Bajate el Firebug Inspeccionar elemento sobre el logo, en la paleta de estilo das a la pestaña estilo seleccionas :hover y te muestra como si estuviese activo el evento ;)

[aguila_393]

Perdona, acabo de revisar y si utiliza el hover. Justamente el error es algo del firebug, estaba viendo los estilos asociados a los links de la cabecera y me figuraba esto:

Código CSS:

#head a, #head a:hover, #head a:focus, #head a:active {
  outline:none medium;
  text-decoration:none !important;
}
 

No se cual seria el error, pero no me mostraba que se estuviese usando background color o algo similar, recien mire el css y si esta. Disculpen.

[C2am]

Hola, la declaración del estilo que busca debe estar en otra linea , ya que la que muestras es las propiedades que son coincidentes a estas clases :
#head a
#head a:hover
#head a:hover:focus
#head a:hover:active

Esto se hace para no repetir en cada una ella por ejemplo el outline:none medium. etc.

seguramente habrá otra donde se especifica el cambio del color de fondo.

Saludos

[maestro_230_1]

hola yo uso esto es algo similar

.menu a:link, .menu a:visited {
color:#color que deseas;
font-weight:bold;
margin:0;
padding:6px 10px 6px 10px;
text-decoration:none;
border-bottom:none;
background:#color que deseas;

}
.menu a:hover {
text-decoration:none;
border-bottom:none;
background:#color que deseas;

[Carloosolrac]

Código CSS:

#tools-left a:hover,#tools-left a:focus,#tools-left a:active{
background-color:#4b67a1
}
 

Ahí está la línea de esa página xD.
Es como te decían más arriba ;).

Lo otro sería JS o también usar un poco de JQuery que sale más fácil y cómodo :3