a:hover img hereda propiedades a:hover

mimi2 · #1 (**permalink**) 15/03/2009, 19:56

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

Mikmoro · #2 (**permalink**) 16/03/2009, 08:08

Quizá podría añadir a a:hover im un display: inline;

Cita:

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

mimi2 · #3 (**permalink**) 16/03/2009, 09:10

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.

Mikmoro · #4 (**permalink**) 16/03/2009, 09:19

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.

mimi2 · #5 (**permalink**) 16/03/2009, 09:21

¿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">


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


<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> 

</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;
}

Mikmoro · #6 (**permalink**) 16/03/2009, 10:52

Sí, con ese código está bien.
Un pregunta: ¿para qué necesitas ese display: block de forma genérica en todos los enlaces?

mimi2 · #7 (**permalink**) 16/03/2009, 11:53

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.

Mikmoro · #8 (**permalink**) 16/03/2009, 12:05

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.

jomaruro · #9 (**permalink**) 16/03/2009, 16:40

Cita:

Iniciado por mimi2

<body >
<div id="contenedor">

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

Hola:

Te sobra lo que te he marcado en rojo.

Saludos.

mimi2 · #10 (**permalink**) 16/03/2009, 16:42

Muchas gracias Mikel, ya funciona.

mimi2 · #11 (**permalink**) 16/03/2009, 16:51

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.

Mikmoro · #12 (**permalink**) 16/03/2009, 16:55

Cita:

Iniciado por mimi2

Muchas gracias Mikel, ya funciona.

De nada, es un placer.

Saludos.