Foros del Web » Diseño web » CSS »

Cambiar imagen de un enlace al pasar el cursor.

Estas en el tema de Cambiar imagen de un enlace al pasar el cursor. en el foro de CSS en Foros del Web. Hola, Que tal, estoy desarrollando un menu en el cual necesito 5 enlaces que son como botones, al posicionar el mouse sobre cada enlace muestra ...
  #1 (permalink)  
Antiguo 24/11/2010, 12:23
 
Fecha de Ingreso: junio-2009
Mensajes: 75
Antigüedad: 4 años, 10 meses
Puntos: 0
Cambiar imagen de un enlace al pasar el cursor.

Hola,

Que tal, estoy desarrollando un menu en el cual necesito 5 enlaces que son como botones, al posicionar el mouse sobre cada enlace muestra una imagen diferente, buscando en el foro me encontre esta opcion

[URL="http://www.forosdelweb.com/f53/como-podria-cambiar-imagen-pasar-raton-358646/"]http://www.forosdelweb.com/f53/como-podria-cambiar-imagen-pasar-raton-358646/[/URL]

Si funciono, pero el problema esta en que cada imagen de cada enlace es diferente, entonces, necesito identificar por ID cada enlace para que diferencie sobre que enlace esta el mouse en ese momento, entonces yo lo ordene de la siguiente manera:

el codigo HTML seria asi

Código HTML:
 <div class="menu">
		<div class="opciones">
		     <a href="home.php#" class="cap"></a>
		     <a href="home.php#" class="segu"></a>
		     <a href="home.php#" class="mail"></a>
		     <a href="home.php#" class="tras"></a>
		     <a href="home.php#" class="cons"></a>
		</div>
		<div class="estado"></div>
	</div> 
Modificando el codigo del enlace seria:

Código:
.cap{
display:block;
height: 25px;
width: 59px;
text-decoration:none;
text-indent:-10000px;
background-image: url(imagenes/btn_captura.jpg); 
}

a:hover{
background-image: url(imagenes/btn_captura2.jpg); 
}
El problema aqui es en el
Código:
a:hover{
background-image: url(imagenes/btn_captura2.jpg); 
}
ya que aqui esta tomando todos los enlaces como referencia a poner la imagen "btn_captura2.jpg", entonces quisiera saber como puedo distinguir cada enlace para que el hover aplique el cambio de imagen al enlace correcto segun el posicionamiento del mouse, ya eh intentado con:

Código:
cap:a:hover{
background-image: url(imagenes/btn_captura2.jpg); 
}
Pero no funciona.


Saludos.
  #2 (permalink)  
Antiguo 24/11/2010, 12:31
Avatar de Dalvenjha  
Fecha de Ingreso: febrero-2008
Ubicación: $("#oficina");
Mensajes: 693
Antigüedad: 6 años, 1 mes
Puntos: 53
Respuesta: Cambiar imagen de un enlace al pasar el cursor.

Pon:
Código:
a.cap:hover{
background-image: url(imagenes/btn_captura2.jpg); 
}
__________________
Mi Showcase ||

Compartiendo todo lo posible con los demás.
  #3 (permalink)  
Antiguo 24/11/2010, 13:06
 
Fecha de Ingreso: junio-2009
Mensajes: 75
Antigüedad: 4 años, 10 meses
Puntos: 0
Respuesta: Cambiar imagen de un enlace al pasar el cursor.

Rayos jajaja yo que me imaginaba algo mas complicado, gracias.

Etiquetas: cursor, enlace, pasar
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 18:29.
SEO by vBSEO 3.3.2