onmouseover / onmouseout

[rapuig]

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! :)

[gustavodbs]

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

Código HTML:

<div id="mail"> 
       [email protected]
</div>
 

Código CSS:

#mail{
    width:300px;
    height:30px;
    color: #8A7876;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 10pt;
    margin-top:10px;    
    background: url('imagen1.jpg');
    }
#mail hover{
       background: url('imagen2.jpg');
}
 

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

[rapuig]

Ninguna otra solución? Gracias