Foros del Web » Creando para Internet » CSS »

onmouseover / onmouseout

Estas en el tema de onmouseover / onmouseout en el foro de CSS en Foros del Web. Buenas tardes. Dos consutas: 1) Es posible con css que al pasar por encima de un un texto haga cambiar una imagen, sin hacer clic, ...
  #1 (permalink)  
Antiguo 15/07/2011, 17:31
 
Fecha de Ingreso: junio-2011
Mensajes: 477
Antigüedad: 5 años, 11 meses
Puntos: 13
onmouseover / onmouseout

Buenas tardes. Dos consutas:

1) Es posible con css que al pasar por encima de un un texto haga cambiar una imagen, sin hacer clic, solo pasando por arriba.

HTML
Código HTML:
<div id="mail"> 
      <img src="img/mail.jpg" width="30" height="30" align="absmiddle"  
       onmouseover="this.src='img/mailOver.jpg'"
       onmouseout="this.src='img/mail.jpg'"/> 
       [email protected]
</div> 
CSS
Código:
#mail{
	width:300px;
	height:30px;
	color: #8A7876;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 10pt;
	margin-top:10px;		
	}
Es decir tengo una img que al pasar sobre ella cambia por otra, pero también quiero que pase eso cuando el cursor este encima de "[email protected]" (el mail es a modo de ejemplo).

2) La segunda consulta es si se puede referir a un elemento especifico de una lista, es decir quiero que al pasar por uno elemento de la misma, este cambie por un color, al pasar por otro cambie por otro color por ejemplo: tengo una lista INICIO GALERÍA CONTACTO, entonces al pasar por inicio quede en rojo, al pasar por galería quede en azul y al pasar por contacto quede en amarillo.

Muchas gracias! :)
  #2 (permalink)  
Antiguo 15/07/2011, 20:15
 
Fecha de Ingreso: noviembre-2010
Ubicación: c:/home
Mensajes: 8
Antigüedad: 6 años, 6 meses
Puntos: 2
Respuesta: onmouseover / onmouseout

La segunda creo que se tendría que hacer con JavaScript
La primera:

Código HTML:
Ver original
  1. <div id="mail">
  2.        [email protected]
  3. </div>


Código CSS:
Ver original
  1. #mail{
  2.     width:300px;
  3.     height:30px;
  4.     color: #8A7876;
  5.     font-family: Verdana, Geneva, sans-serif;
  6.     font-size: 10pt;
  7.     margin-top:10px;   
  8.     background: url('imagen1.jpg');
  9.     }
  10. #mail hover{
  11.        background: url('imagen2.jpg');
  12. }

Con el "hover" puedes hacer eso que quieres.
Esta es una respuesta muy sencilla y pequeña, puedes esperar a que los demas colegas con mas conocimientos te dén una mano con el tema.

Saludos
  #3 (permalink)  
Antiguo 18/07/2011, 16:50
 
Fecha de Ingreso: junio-2011
Mensajes: 477
Antigüedad: 5 años, 11 meses
Puntos: 13
Respuesta: onmouseover / onmouseout

Ninguna otra solución? Gracias

Etiquetas: onmouseout, onmouseover
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 09:26.