Problema con a:hover e img a:hover

MrX · #1 (**permalink**) 04/06/2006, 14:25

mi problema es el siguiente:
los links de mi pagina cuando se les hace el hover tien un fondo, pero no quiero que las imagene con links tengan tambien ese fondo, no quiero que tengan nada, sin embargo me toman el fondo de a:hover...

el codigo es el siguiente:

.post a {
padding: 2px;
color: #993333;
text-decoration: none;
}

.post a:hover {
padding: 2px;
color: #E3E1CD;
text-decoration: none;
background-color: #993333;
}

.post img a, img a:hover {
boder: none;
background-color: transparent;
}

tampoco anda con:

img a, img a:hover {
boder: none;
background-color: transparent;
}

Espero que alguien me ayude

Gracias

cinhetica · #2 (**permalink**) 04/06/2006, 14:43

holas mrX, bien podrias probar con esta clase para las imagenes:

en la declaracion de estylos:
a.imagenes{
display:block;
width:xpx;
height:ypx;}

a la hora de llamarlo:

<a href="#" class="imagenes"><IMG src="fotito.gif"></A>

creo que naa mas declaras para el link de imagenes otra clase, espero resulte

MrX · #3 (**permalink**) 04/06/2006, 14:47

lo probé pero no va...

muchas gracias igual

cinhetica · #4 (**permalink**) 04/06/2006, 15:16

cometi un error en la declaracion de estylos solo pones .imagenes{} mas no a.imagenes{}

deberia funcionar incluso para asegurarse que la capa agarra el color que quieres agregarias:

.imagenes{
display:block;
width:xpx;
height:ypx;
background-color:#mismo valor hexadecimal que buscas;
color:inherit !important;}

suerte., como te digo todo esta en declarar una clase diferente para las imagenes. mas no en el a

MrX · #5 (**permalink**) 04/06/2006, 15:32

pues nada, si lo hago así al pasar por arriba me toma todo el <p> con el color de fondo que está para a:hover

cinhetica · #6 (**permalink**) 04/06/2006, 16:36

bien acabo de hacer una simulacion bastante simple, ia que no conosco tu codigo fuente.
Generalmente cuando queremos hacer links personalizados no es recomendable que toquemos los valores predefinidos para el <A>
asi si queremos un estylo propio hariamos lo siguiente:

aplicacion de simulacion:los stylos en ese orden siempre y los inherit solo reemplazan el valor transparente esto para una buena validacion en css standar si hay un color debe haber un background-color y viciversa.

A.fuenteuno:link{
background-color:inherit !important;
color:#999999;
text-decoration:none;}

A.fuenteuno:visited{
color:#999999;
background-color:inherit !important;
text-decoration:none;}

A.fuenteuno:hover{
background-color:#484848;
color:inherit !important;
text-decoration:underline;}

A.fuenteuno:active{
color:#999999;
background-color:inherit !important;}

entonces mi texto linkeable heredaria la clase fuenteuno de color plomo y cambiaria a mas gris su fondo al pasar sobre el.

para la imagen lo que habiamos puesto anteriormente otra clase:
.imagenes{
display:block;
width:xpx;
height:ypx;
background-color:#mismo valor hexadecimal que buscas;
color:inherit !important;}

asi en el cuerpo de mi doc html los llamaria:

<BODY>
<A href="#" class="fuenteuno">ir a imagen 01:</A><P>
<A href="#"><IMG src="brillokevu.jpg" width="158" height="142" border="0" alt=""></A>
</BODY>

y tendrias lo que quieres, en css todo debe estar muy ordenado. hay un <P> y no hay problema con eso aunque personalmente trabajo con cajas.

espero no me haya extendido mucho y otra vez suerte, checa bien tu codigo.

MrX · #7 (**permalink**) 04/06/2006, 23:04

pues mira...nada...el img con link sigue heredando el background del a:hover

es para un theme de wordpress que estoy haciendo...ya lo termino y no puedo con este problema...

el codigo html es algo así:

<div id="contenedor_posts">
<div class="post">
<h4><a href="#">Titulo</a></h4>
<p><a href="#">Link</a></p>
<p><a href="#"><img alt="Texto alt" src="imagen.jpg" /></a></p>
</div>
</div>

el h4 tambien es link, sin embargo no hereda los atributos del a:hover sino que poniendo .post h4{ background: transparent;} lo soluciona, pero no es así con el img

axiertxo · #8 (**permalink**) 05/06/2006, 00:56

Hola, ponle esto y solucionao

Añadele a la imagen que coge el fondo esto:

style="background:none"

cinhetica · #9 (**permalink**) 05/06/2006, 09:29

me pregunto por que usaste la clase post

mira este es el resultado de tu codigo poniendo clases a cada enlace, como mencione lineas arriba: members.lycos.co.uk/xee21/exemplo.html

y esto se hizo en los estylos :

#contenedor_posts{
width:200px;
height:400px;
background-color:#f2f2f2;
color:inherit !important;}

a.fuentetitulo:link{
background-color:inherit !important;
color:#999999;
text-decoration:none;}

a.fuentetitulo:visited{
color:#999999;
background-color:inherit !important;
text-decoration:none;}

a.fuentetitulo:hover{
background-color:#484848;
color:inherit !important;
text-decoration:underline;}

a.fuentetitulo:active{
color:#999999;
background-color:inherit !important;}

a.fuentearticulo:link{
background-color:inherit !important;
color:#999999;
text-decoration:none;}

a.fuentearticulo:visited{
color:#999999;
background-color:inherit !important;
text-decoration:none;}

a.fuentearticulo:hover{
background-color:#00ffff;
color:inherit !important;
text-decoration:underline;}

a.fuentearticulo:active{
color:#999999;
background-color:inherit !important;}

y en el body:

<HTML>

<HEAD>
<TITLE>exemplo</TITLE>
<LINK REL=stylesheet href="estylos.css" TYPE="text/css">
</HEAD>

<BODY>

<DIV id="contenedor_posts" align="center">
<h4><a href="#" class="fuentetitulo">TITULO</a></h4>
<p>
<a href="#" class="fuentearticulo">LINK</a>
</p>
<p>
<a href=""><img src="image/silvia.gif" width="150" height="113" border="0" alt="mi amix"></a>
</p>
<BR>
este es el estilo:<BR>

</BODY>

</HTML>

MrX · #10 (**permalink**) 05/06/2006, 10:34

pues asi si que anda OK

el problema es que este metodo es muy manual como para un theme de wordpress.

supuestamente los themes de wordpress tienen que ser mas estandarizados y cualquiera que lo use pueda verlo bien sin tener que andar cambiando el codigo poniendole clases y eso...

mi gran duda sigue siendo, porque si hay tantos que usan el background para los links no tienen problema con este tipo de cosas y a mi no me funciona

revise unos 20 themes de wordpress que usan background para los linksy les anda correctamente, y mirandolos linea por linea no logro darme cuenta porq a ellos le anda y a mi no

muchas gracias