Ocultar imagen con link activo css

rubenpm21 · #1 (**permalink**) 12/12/2011, 17:48

Buenas a todos de nuevo,

Estoy creando un link que al posarme con el puntero muestra una imagen y al quitarlo desaparece. El problema es que al pinchar el link aparece como activo y la imagen no se oculta si no que se queda fija. Si le doy la orden de oultar la imagen ya no la muestra mas al pasar por encima el ratón. ¿Como puedo hacerlo?

Este es mi código:

Código:

img.grangame1 {
	visibility:hidden;
	position:absolute;
	top:0;
	left:130px;
	border:0;
}	

.game1:focus img.grangame1 , .game1:active img.grangame1 {
	visibility:visible;
}

.game1:hover img.grangame1 {
	visibility:visible;
}

.game1:visited img.grangame1 {
	visibility:hidden;
}

Muchas gracias a todos.

rubenpm21 · #2 (**permalink**) 12/12/2011, 18:01

Me respondo:

Había puesto demasiado código.

Queda así:

Código:

img.grangame1 {
	visibility:hidden;
	position:absolute;
	top:0;
	left:130px;
	border:0;
}	

.game1:hover img.grangame1 {
	visibility:visible;
}

cristian_cena · #3 (**permalink**) 13/12/2011, 18:54

prueba con :active, saludos.

emprear · #4 (**permalink**) 13/12/2011, 20:32

En principio estás mostrando una imagen al hacerle hover a un link ocultando dicha imagen al retirar el mouse del link.
Hay técnicas un poco más complejas para hacer eso sólo con CSS, como si estuvieses haciendo un tooltip

pero si solo es para mostrar una imagen, más sencillo es hacerlo con javascript

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<style type="text/css">
/*<![CDATA[*/
#foto {
/* tamaño del div = al tamaño de la imagen */
width:200px;
height:200px;
}
/*]]>*/
</style>
</head>
<body>
<p>
<a href="a.html"
onmouseover="document.getElementById('foto').style.backgroundImage='url(uno.jpg)';"  onmouseout="document.getElementById('foto').style.backgroundImage='none';">
xxx
</a>
</p>
<div id="foto">
<!-- div para foto link hover -->
</div>
</body>
</html>

Lo que no queda claro es lo de "pinchar", supongo te referirás a cuando se sale de la página y se vuelve a entrar.

saludos

rubenpm21 · #5 (**permalink**) 14/12/2011, 15:13

No, simplemente quería que al pasar el raton se viese la imagen y luego al pinchar para ir al link no se quedase fija la imagen. Resulta que con focus al dejar el link pinchado se quedaba la imagen fija hasta que pinchaba en otra parte de la pantalla, y con active es que al ir al enlace se quedaba tambien fija la imagen. El caso es que todo eso me sobraba y quitándolo se solucionó mi problema.

Gracias a todos.

cristian_cena · #6 (**permalink**) 14/12/2011, 15:35

Hace un tiempo con motivos de mostrar como trabajar con sprites hice un ejemplo, pero usando los métodos hover(), mousedown() y mouseup() de jquery. Si te sirve, es este.

Saludos