Foros del Web » Creando para Internet » CSS »

a:hover img hereda propiedades a:hover

Estas en el tema de a:hover img hereda propiedades a:hover en el foro de CSS en Foros del Web. Hola a todos. Soy nueva en esto de css y depués de mucho consultar y probar me he decidido a participar en el foro. Os ...
  #1 (permalink)  
Antiguo 15/03/2009, 20:56
 
Fecha de Ingreso: marzo-2009
Mensajes: 15
Antigüedad: 8 años, 8 meses
Puntos: 0
a:hover img hereda propiedades a:hover

Hola a todos.

Soy nueva en esto de css y depués de mucho consultar y probar me he decidido a participar en el foro. Os cuento

Tengo

a:hover {
text-decoration: none;
color: #f5be00;
font-family:Times;
font-size:23px;
font-weight:bold;
font-style:italic;
padding:2px;
display: block;
background-color: #155900;

}

y

a:hover img{
border:1px solid red;}

El problema que tengo es que cuando me posiciono sobre una imagen toma la propiedad definida (poner el borde rojo) y hereda las de a:hover por lo que hace un display:block que me descoloca todo.

Pregunta: qué puedo poner para que a:hover img no tome la propiedad display?

Espero haberme explicado bien
  #2 (permalink)  
Antiguo 16/03/2009, 09:08
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: a:hover img hereda propiedades a:hover

Quizá podría añadir a a:hover im un display: inline;
Cita:
a:hover img{
border:1px solid red;
display: inline;
}
__________________
Visita mi nueva web idplus.org
  #3 (permalink)  
Antiguo 16/03/2009, 10:10
 
Fecha de Ingreso: marzo-2009
Mensajes: 15
Antigüedad: 8 años, 8 meses
Puntos: 0
Respuesta: a:hover img hereda propiedades a:hover

Gracias por tu respuesta Mikmoro pero no me funciona.

El problema es que tengo tres imágenes una al lado de otra, y al posicionarme sobre una de ella, se me mueven las otras dos xq la trata como si estuviera dentro de un bloque y desplaza las otras dos por no tener espacio para colocarlas en la misma línea.
  #4 (permalink)  
Antiguo 16/03/2009, 10:19
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: a:hover img hereda propiedades a:hover

Sí, pero el problema no creo que sea el que planteabas de display, que es a lo que he respondido.

Pon tu código HTML y CSS y lo vemos.
__________________
Visita mi nueva web idplus.org
  #5 (permalink)  
Antiguo 16/03/2009, 10:21
 
Fecha de Ingreso: marzo-2009
Mensajes: 15
Antigüedad: 8 años, 8 meses
Puntos: 0
Respuesta: a:hover img hereda propiedades a:hover

¿Qué parte del código necesitas? Perdona, pero soy nueva en esto y no sé muy bien como funciona

Código HTML

<body >

<div id="contenedor">


<!-- PARTE IZDA-->
<div id="izda">
<a href="quien.html">¿Quiénes somos?</a></td></tr>
</div>


<!--PARTE DERECHA-->
<div id="dcha">
<a href="images/gDSCN4180.jpg" " title="prueba">
<img src="images/pDSCN4180.jpg" /> </a>
<a href="images/gDSCN4180.jpg" title="prueba">
<img src="images/pDSCN4180.jpg" /> </a>
<a href="images/gDSCN4180.jpg" title="prueba">
<img src="images/pDSCN4180.jpg" /> </a>

</div>
</div> <!-- CONTENEDOR-->

</body>




Código CSS:


body {
margin: 0;
height: 100%;
padding:0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}


#contenedor {
width: 800px;
height: 600px;
border:0px solid #123456;
background-color: green;
margin-left: auto;
margin-right: auto;
min-width: 750px;
max-width: 950px;
text-align:left;
padding: 5px;

}

#izda{
padding:0;
width:200px;
height:100%;
border: 3px solid #155900;
float:left;
}



#dcha{
padding:0;
height:100%;
border: 1px solid red;
}




a img {
border:1px solid #000000;
}



div, p {
font-family: Verdana;
line-height: 140%;
color: #000000;
font-weight: bold;
font-size: 20px;
}



a:link, a:visited{
font-family:Times;
color: white;
text-decoration: none;
font-weight: normal;
}


a:hover {
text-decoration: none;
color: navy;
font-family:Times;
font-size:23px;
font-weight:bold;
font-style:italic;
padding:2px;
display:block;
background-color: silver;
}

a:hover img{
border:1px solid red;
}

Última edición por mimi2; 16/03/2009 a las 10:41
  #6 (permalink)  
Antiguo 16/03/2009, 11:52
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: a:hover img hereda propiedades a:hover

Sí, con ese código está bien.
Un pregunta: ¿para qué necesitas ese display: block de forma genérica en todos los enlaces?
__________________
Visita mi nueva web idplus.org
  #7 (permalink)  
Antiguo 16/03/2009, 12:53
 
Fecha de Ingreso: marzo-2009
Mensajes: 15
Antigüedad: 8 años, 8 meses
Puntos: 0
Respuesta: a:hover img hereda propiedades a:hover

No es que lo quiera de forma genérica en todos los enlaces, lo que pasa es que voy haciendo la página por partes, en la primera (parte izda) tengo un menú que quiero que se resalte al elegir una opción (por eso está definido como bloque) y en la parte derecha tengo enlaces con fotos para verlas más grandes , este es el motivo por el que definí a:hover img. (para que funcionara de otra forma y no lo tome como un bloque) y esto es lo que no me funciona.
  #8 (permalink)  
Antiguo 16/03/2009, 13:05
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: a:hover img hereda propiedades a:hover

Muy bien, entonces prueba a poner:
Cita:
#izda a:hover {
text-decoration: none;
color: navy;
font-family:Times;
font-size:23px;
font-weight:bold;
font-style:italic;
padding:2px;
display:block;
background-color: silver;
}
Eso afectará sólo a los enlaces del bloque #izda.
__________________
Visita mi nueva web idplus.org
  #9 (permalink)  
Antiguo 16/03/2009, 17:40
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: a:hover img hereda propiedades a:hover

Cita:
Iniciado por mimi2 Ver Mensaje
<body >
<div id="contenedor">
<!-- PARTE IZDA-->
<div id="izda">
<a href="quien.html">¿Quiénes somos?</a></td></tr>
Hola:

Te sobra lo que te he marcado en rojo.

Saludos.

  #10 (permalink)  
Antiguo 16/03/2009, 17:42
 
Fecha de Ingreso: marzo-2009
Mensajes: 15
Antigüedad: 8 años, 8 meses
Puntos: 0
Respuesta: a:hover img hereda propiedades a:hover

Muchas gracias Mikel, ya funciona.
  #11 (permalink)  
Antiguo 16/03/2009, 17:51
 
Fecha de Ingreso: marzo-2009
Mensajes: 15
Antigüedad: 8 años, 8 meses
Puntos: 0
Respuesta: a:hover img hereda propiedades a:hover

Lo sé, es que he puesto todo el código que tengo sino la parte afectada nada más y al copiar y pegar, me he pasado un pelín.

De todas formas, gracias por el apunte.
  #12 (permalink)  
Antiguo 16/03/2009, 17:55
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: a:hover img hereda propiedades a:hover

Cita:
Iniciado por mimi2 Ver Mensaje
Muchas gracias Mikel, ya funciona.
De nada, es un placer.

Saludos.
__________________
Visita mi nueva web idplus.org
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 16:58.