Efectos con Ratón

Cómo hacer efectos onMouseover?
Cómo hacer que el color del link o el color del fondo cambie cuando el ratón se desplaza por encima?

Explicación

Propiedad :

efectos onMouseover
Efectos de Texto:
ej:

Es muy simple hacerlo. Simplemente sigue los pasos y lo puedes hacer.
Paso 1:
En el encabezado añade el estilo que quieres que el texto cambie, como puedes ver a continuación
<head>
<style>
/*Así es como se ve el texto antes de pasar el ratón por encima*/
.colc{
font-family: san-serif;
color: #9EFF36;
}
/*Así es como se verá el texto cuando pase el ratón por encima. Aprecia que "hover" es el cambio más importante aquí*/
.colc:hover
{
font-family: san-serif;
color: #456745;
}
</style>
</head>

Paso 2:
Establece el estilo al texto para el que quieres el efecto cuando pases el ratón por encima
ej:
<a href="" class="colc"> Este es el Texto del Ratón por Encima </a>

Nota: Aquí establecemos el estilo con la etiqueta "class". El nombre del estilo es "colc" que fue creado en la parte del encabezado.

Para hacer que cambien el color del fondo, simplemente añade la propiedad "background-color" en las etiquetas de estilo como indicamos arriba.
Ej: Formar el estilo como
.colc2{
font-family: san-serif;
color: #9EFF36;
}
/*Así es como se verá el texto cuando pase el ratón por encima. Aprecia que "hover" es el cambio más importante aquí*/
.colc2:hover
{
background-color: #245250;
}

establece este estilo a la etiqueta html
<a href="" class="colc2"> Este es el Efecto del Ratón por Encima </a>