Re: [Ovillo] Evitar background-color en las imágenes
Hola,
Lo que pasa es que al hacer el hover sobre el enlace se aplican los dos
estilos que has definido, para el enlace y imagen:
a:hover {
>color: #D3E2E7;
>text-decoration: none;
>background-color:#FF3366;
>}
>
> a:hover > img {
>background-color: transparent !important;
> }
> Pero no funciona, pero lo curioso del tema es que el "background-
> color" que se ve en el "hover" no corresponde a las "img", sino más
> bien a una franja mucho más pequeña.
>
Esto es lo que me ocurría a mi :S Se me mostraba parte del color hover del
enlace, una pequeña franja abajo o a la derecha de la imagen (dependiendo
del navegador).
La única manera que encontré de solucionarlo era de ponerle un display:block
al enlace:
a {
display: block;
/* los demás estilos */
}
pero por supuesto esto no me valía para los enlaces que estaban embebidos
dentro de algún texto ya que al ser un "block" se van a la línea siguiente.
Por tanto pienso que no hay solución que valga para enlaces de tipo texto y
de tipo imagen. Lo mejor sería poner una clase distinta a los enlaces (si se
puede). Ejemplo:
a:hover.texto {
background-color: #FF3366;
}
a:hover.imagen {
background-color: transparent;
}
Un saludo,
Tamara
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Evitar background-color en las imágenes
Me parece que ya he encontrado el pequeño misterio. La cosa está en que "img" ,por defecto, es un elemento en línea y por tanto el "a:hover" es algo que contiene "en línea" a las imágenes. Por tanto, lo que se ve en el "a:hover" no es el "background-color" de la "img" sino simplemente de la línea en la que está metida (de hecho tiene el "line-height" que defino por defecto y no la altura de la "img"). Para evitar esto se trataría de definir las "img" como bloques mediante "display: block". Yo normalmente defino de entrada las "img" como bloques para evitar estas perrerías pero en este caso se trataba de una hoja de estilos heredada y no he caído en la cuenta... Salu2 El 10/04/2008, a las 23:37, Tamara Forza escribió: > Hola, > > la mejor solución sería definir una clase distinta a los enlaces que > tengan > imágenes, siempre si es posible. En el caso contrario... me encontré > hace > tiempo con este problema y no logré solucionarlo del todo. El > problema es > que no se pueden definir estilos distinto al elementos dependiendo > de lo que > contienen... yo al final tuve que usar otros efectos para el hover > (ej. el > típico underline). > > La única manera de que no se vea el color de fondo del hover es que la > imagen no tenga transparencias y que el enlace no deje espacios > (padding por > ejemplo) alrededor de la imagen. Es fácil decirlo, pero yo no logré > implementarlo :( > > No sé si te he ayudado o no... espero haber entendido bien tu > problema. > > Salu2 > Tamara > ___ > Lista de distribución Ovillo > Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org > Puedes modificar tus datos o desuscribirte en la siguiente > dirección: http://lists.ovillo.org/mailman/listinfo/ovillo > ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Evitar background-color en las imágenes
A ver,
concreto más el tema:
Lo que tengo y creo que "sería correcto" es lo siguiente:
a {
color: #06c;
text-decoration: none;
}
a:hover {
color: #D3E2E7;
text-decoration: none;
background-color:#FF3366;
}
img {
text-decoration: none;
border: none;
}
a:hover > img {
background-color: transparent !important;
}
Pero no funciona, pero lo curioso del tema es que el "background-
color" que se ve en el "hover" no corresponde a las "img", sino más
bien a una franja mucho más pequeña.
De hecho si añado:
img:hover {
background-color: #99FF00 !important;
}
me aparecen los dos "background-color": el del "a:hover" y el del
"img:hover"
¿...?
El 10/04/2008, a las 19:05, Terradillos Gutiérrez Carlos escribió:
> Hola,
> cómo podría evitarse que esto:
>
> a {
> color: #06c;
> text-decoration: none;
> }
>
> a:hover {
> color: #D3E2E7;
> text-decoration: none;
> background-color:#FF3366;
> }
>
> conllevara que las "img" incluidas entre "a" hicieran un fondo de
> color en el "hover".
>
>
> Salu2
> ___
> Lista de distribución Ovillo
> Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
> Puedes modificar tus datos o desuscribirte en la siguiente
> dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
>
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Evitar background-color en las imágenes
Hola, la mejor solución sería definir una clase distinta a los enlaces que tengan imágenes, siempre si es posible. En el caso contrario... me encontré hace tiempo con este problema y no logré solucionarlo del todo. El problema es que no se pueden definir estilos distinto al elementos dependiendo de lo que contienen... yo al final tuve que usar otros efectos para el hover (ej. el típico underline). La única manera de que no se vea el color de fondo del hover es que la imagen no tenga transparencias y que el enlace no deje espacios (padding por ejemplo) alrededor de la imagen. Es fácil decirlo, pero yo no logré implementarlo :( No sé si te he ayudado o no... espero haber entendido bien tu problema. Salu2 Tamara ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Evitar background-color en las imágenes
Gracias Hari,
"none" no es un valor correcto para "background-color", podría ponerse
"transparent" que es su valor por defecto pero ni en un caso ni en
otro me funciona. Ni siquiera funciona con "!important".
¿...?
El 10/04/2008, a las 20:32, Hari Seldon escribió:
> a:hover img {
> color: #D3E2E7;
> text-decoration: none;
> background-color:none;
> }
>
> Prueba añadiendo eso
>
>
>
> Terradillos Gutiérrez Carlos escribió:
>> Hola,
>> cómo podría evitarse que esto:
>>
>> a {
>> color: #06c;
>> text-decoration: none;
>> }
>>
>> a:hover {
>> color: #D3E2E7;
>> text-decoration: none;
>> background-color:#FF3366;
>> }
>>
>> conllevara que las "img" incluidas entre "a" hicieran un fondo de
>> color en el "hover".
>>
>>
>> Salu2
>> ___
>> Lista de distribución Ovillo
>> Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
>> Puedes modificar tus datos o desuscribirte en la siguiente
>> dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
>>
>>
>
> ___
> Lista de distribución Ovillo
> Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
> Puedes modificar tus datos o desuscribirte en la siguiente
> dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
>
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Evitar background-color en las imágenes
Sí, ya imagino que tengo que darle un estilo a "img" específico en es
contexto, o sea, dentro de "a", pero ese es el problema, que nada
funciona...
El 10/04/2008, a las 20:37, Javier Trejo escribió:
> Si no entiendo mal lo que querés lograr es que cuando una imagen
> esté dentro
> de un "a" no tenga el efecto de hover.
>
> De ser así, lo que tenés que hacer es definir un estilo a img
> (debajo de
> esos estilos que ya definiste) para que luego un estilo pise al otro
> y anule
> el efecto del fondo.
>
> Saludos,
>
>
> Javier Trejo
> Diseñador Web
>
> JT - Comunicación Interactiva
> www.cominteractiva.com.ar
> Cel.: +54 (11) 15 6485-7734
> Mail: [EMAIL PROTECTED]
> MSN: [EMAIL PROTECTED]
> Skype: trejo.javier
>
> -Mensaje original-
> De: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
> ]
> En nombre de Terradillos Gutiérrez Carlos
> Enviado el: Jueves, 10 de Abril de 2008 14:06
> Para: Ovillo, la lista de CSS en castellano
> Asunto: [Ovillo] Evitar background-color en las imágenes
>
> Hola,
> cómo podría evitarse que esto:
>
> a {
> color: #06c;
> text-decoration: none;
> }
>
> a:hover {
> color: #D3E2E7;
> text-decoration: none;
> background-color:#FF3366;
> }
>
> conllevara que las "img" incluidas entre "a" hicieran un fondo de
> color en el "hover".
>
>
> Salu2
> ___
> Lista de distribución Ovillo
> Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
> Puedes modificar tus datos o desuscribirte en la siguiente dirección:
> http://lists.ovillo.org/mailman/listinfo/ovillo
>
> ___
> Lista de distribución Ovillo
> Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
> Puedes modificar tus datos o desuscribirte en la siguiente
> dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
>
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Evitar background-color en las imágenes
Si no entiendo mal lo que querés lograr es que cuando una imagen esté dentro
de un "a" no tenga el efecto de hover.
De ser así, lo que tenés que hacer es definir un estilo a img (debajo de
esos estilos que ya definiste) para que luego un estilo pise al otro y anule
el efecto del fondo.
Saludos,
Javier Trejo
Diseñador Web
JT - Comunicación Interactiva
www.cominteractiva.com.ar
Cel.: +54 (11) 15 6485-7734
Mail: [EMAIL PROTECTED]
MSN: [EMAIL PROTECTED]
Skype: trejo.javier
-Mensaje original-
De: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
En nombre de Terradillos Gutiérrez Carlos
Enviado el: Jueves, 10 de Abril de 2008 14:06
Para: Ovillo, la lista de CSS en castellano
Asunto: [Ovillo] Evitar background-color en las imágenes
Hola,
cómo podría evitarse que esto:
a {
color: #06c;
text-decoration: none;
}
a:hover {
color: #D3E2E7;
text-decoration: none;
background-color:#FF3366;
}
conllevara que las "img" incluidas entre "a" hicieran un fondo de
color en el "hover".
Salu2
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Evitar background-color en las imágenes
a:hover img {
color: #D3E2E7;
text-decoration: none;
background-color:none;
}
Prueba añadiendo eso
Terradillos Gutiérrez Carlos escribió:
> Hola,
> cómo podría evitarse que esto:
>
> a {
> color: #06c;
> text-decoration: none;
> }
>
> a:hover {
> color: #D3E2E7;
> text-decoration: none;
> background-color:#FF3366;
> }
>
> conllevara que las "img" incluidas entre "a" hicieran un fondo de
> color en el "hover".
>
>
> Salu2
> ___
> Lista de distribución Ovillo
> Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
> Puedes modificar tus datos o desuscribirte en la siguiente dirección:
> http://lists.ovillo.org/mailman/listinfo/ovillo
>
>
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Evitar background-color en las imágenes
Creo que es al contrario, evitar que tengan el fondo de color.
Ramon Lapenta
[EMAIL PROTECTED]
El 10/04/2008, a las 12:13 p.m., Joseba escribió:
>
> Yo no entiendo muy bien cual es tu duda...
>
> ¿Quieres que las imágenes dentro del link tengan el color de fondo
> especificado en el hover?
>
>
> -Mensaje original-
> De: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
> ]
> En nombre de Terradillos Gutiérrez Carlos
> Enviado el: jueves, 10 de abril de 2008 19:06
> Para: Ovillo, la lista de CSS en castellano
> Asunto: [Ovillo] Evitar background-color en las imágenes
>
> Hola,
> cómo podría evitarse que esto:
>
> a {
> color: #06c;
> text-decoration: none;
> }
>
> a:hover {
> color: #D3E2E7;
> text-decoration: none;
> background-color:#FF3366;
> }
>
> conllevara que las "img" incluidas entre "a" hicieran un fondo de
> color en el "hover".
>
>
> Salu2
> ___
> Lista de distribución Ovillo
> Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
> Puedes modificar tus datos o desuscribirte en la siguiente dirección:
> http://lists.ovillo.org/mailman/listinfo/ovillo
>
>
>
>
> ___
> Lista de distribución Ovillo
> Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
> Puedes modificar tus datos o desuscribirte en la siguiente
> dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Evitar background-color en las imágenes
Yo no entiendo muy bien cual es tu duda...
¿Quieres que las imágenes dentro del link tengan el color de fondo
especificado en el hover?
-Mensaje original-
De: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
En nombre de Terradillos Gutiérrez Carlos
Enviado el: jueves, 10 de abril de 2008 19:06
Para: Ovillo, la lista de CSS en castellano
Asunto: [Ovillo] Evitar background-color en las imágenes
Hola,
cómo podría evitarse que esto:
a {
color: #06c;
text-decoration: none;
}
a:hover {
color: #D3E2E7;
text-decoration: none;
background-color:#FF3366;
}
conllevara que las "img" incluidas entre "a" hicieran un fondo de
color en el "hover".
Salu2
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
[Ovillo] Evitar background-color en las imágenes
Hola,
cómo podría evitarse que esto:
a {
color: #06c;
text-decoration: none;
}
a:hover {
color: #D3E2E7;
text-decoration: none;
background-color:#FF3366;
}
conllevara que las "img" incluidas entre "a" hicieran un fondo de
color en el "hover".
Salu2
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
