Foros del Web » Creando para Internet » CSS »

Problema con a:hover e img a:hover

Estas en el tema de Problema con a:hover e img a:hover en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 04/06/2006, 15:25
MrX
 
Fecha de Ingreso: abril-2005
Mensajes: 7
Antigüedad: 12 años, 7 meses
Puntos: 0
Problema con a:hover e img a:hover

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
  #2 (permalink)  
Antiguo 04/06/2006, 15:43
 
Fecha de Ingreso: noviembre-2005
Ubicación: peru
Mensajes: 12
Antigüedad: 12 años
Puntos: 0
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
  #3 (permalink)  
Antiguo 04/06/2006, 15:47
MrX
 
Fecha de Ingreso: abril-2005
Mensajes: 7
Antigüedad: 12 años, 7 meses
Puntos: 0
lo probé pero no va...

muchas gracias igual
  #4 (permalink)  
Antiguo 04/06/2006, 16:16
 
Fecha de Ingreso: noviembre-2005
Ubicación: peru
Mensajes: 12
Antigüedad: 12 años
Puntos: 0
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
  #5 (permalink)  
Antiguo 04/06/2006, 16:32
MrX
 
Fecha de Ingreso: abril-2005
Mensajes: 7
Antigüedad: 12 años, 7 meses
Puntos: 0
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
  #6 (permalink)  
Antiguo 04/06/2006, 17:36
 
Fecha de Ingreso: noviembre-2005
Ubicación: peru
Mensajes: 12
Antigüedad: 12 años
Puntos: 0
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.
  #7 (permalink)  
Antiguo 05/06/2006, 00:04
MrX
 
Fecha de Ingreso: abril-2005
Mensajes: 7
Antigüedad: 12 años, 7 meses
Puntos: 0
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
  #8 (permalink)  
Antiguo 05/06/2006, 01:56
Avatar de axiertxo  
Fecha de Ingreso: octubre-2005
Ubicación: España
Mensajes: 387
Antigüedad: 12 años, 1 mes
Puntos: 0
Hola, ponle esto y solucionao

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

style="background:none"
__________________
El mundo exige resultados. No le cuentes a otros tus dolores del parto. Muéstrales al niño.
  #9 (permalink)  
Antiguo 05/06/2006, 10:29
 
Fecha de Ingreso: noviembre-2005
Ubicación: peru
Mensajes: 12
Antigüedad: 12 años
Puntos: 0
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>
  #10 (permalink)  
Antiguo 05/06/2006, 11:34
MrX
 
Fecha de Ingreso: abril-2005
Mensajes: 7
Antigüedad: 12 años, 7 meses
Puntos: 0
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
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 20:47.