CSS - Problema para aplicar "hover" CSS

 
Vista:

Problema para aplicar "hover" CSS

Publicado por Brooke Spencer (2 intervenciones) el 24/02/2015 17:59:58
Hola a todos los que puedan ver esto, les cuento que tengo un problema para manipular la propiedad hover en el CSS.

Tengo la siguiente estructura en html:

1
2
3
4
5
6
<div id="cuadro1">
  <div align="center">
    <a href="http://mysite.com="_top" >
    <img src="mypicture.png" width="300" height="300"/></a>
</div>
</div>

Lo que necesito es crear un hover sobre este div; he tratado con muchas combinaciones CSS pero nada resulta; la ultima que use fue la siguiente:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
#cuadro1 > a {
	 display: none;
	 width: 300px;
	 height: 300px;
	 position:absolute;
	 margin:0px 0px 0px 0px;
	 z-index:3000;
	 background: #000;
	 border:#fff 1px dashed;
	 padding:5px;
	 font-size:12px;
	 text-decoration:none;
	 color:#fff;
	 background-image:url(cross.png);
	 background-position:center;
	 background-repeat:no-repeat;
	filter: alpha(opacity=80);
	opacity: .80;
	-moz-opacity: .80;
}
 
#cuadro1:hover a {
    display: block;
	cursor:pointer;
}

¿Alguna sugerencia?
les agradezco toda ayuda posible.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve
Val: 624
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Problema para aplicar "hover" CSS

Publicado por xve (490 intervenciones) el 24/02/2015 20:38:06
Hola Brooke, he probado tu código y si que funciona... al pasar el ratón por encima del div me muestra la mano!!!!

Exactamente que quieres que haga al pasar el ratón por encima del div?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

Problema para aplicar "hover" CSS

Publicado por andyman (1 intervención) el 24/02/2015 21:17:32
a mi me funciona, que es lo que quieres exactamente???
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Problema para aplicar "hover" CSS

Publicado por Brooke Spencer (2 intervenciones) el 24/02/2015 21:30:33
Debería aparecer un recuadro negro con opacidad de 80 y no me carga la imagen cross.png (no es un problema de ruta de la imagen, ya lo constaté)
No se si se deba a que no menciono el <div align="center"> en el CSS por eso preguntaba...

funciona todo cuando solo tengo esto en el HTML

<div id="cuadro1">
<a href="http://mysite.com="_top"</a>
</div>

pero no cuando tengo esto:

<div id="cuadro1">
<div align="center">
<a href="http://mysite.com="_top" >
<img src="mypicture.png" width="300" height="300"/></a>
</div>
</div>

Gracias por la respuesta
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve
Val: 624
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Problema para aplicar "hover" CSS

Publicado por xve (490 intervenciones) el 25/02/2015 07:43:52
Hola Brooke, pero todo esto lo estas haciendo a un <a href...> y ahí creo que no puedes hacerlo, no puedes ponerle una transparencia, ni un fondo... mira este código que te he modificado un poco.

Te he comentado el background-position y repeat, ya que depende de como sea la imagen de fondo no la verías, ya que se queda detrás de la imagen <img...>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!doctype html>
<html>
<head>
    <style>
    #cuadro1>div {
        background: #000;
        border:#fff 1px dashed;
        padding:5px;
        background-image:url(cross.png);
/*         background-position:center; */
/*         background-repeat:no-repeat; */
        filter: alpha(opacity=80);
        opacity: .80;
        -moz-opacity: .80;
    }
 
    #cuadro1>div:hover {
        filter: alpha(opacity=1);
        opacity: 1;
        -moz-opacity: 1;
        cursor:pointer;
    }
    </style>
</head>
<body>
 
<div id="cuadro1">
    <div align="center">
        <a href="http://mysite.com" ><img src="mypicture.png" width="300" height="300"/></a>
    </div>
</div>
 
</body>
</html>

Coméntanos, ok?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar