Cómo comprobar si el ratón está sobre DIV en JavaScript

JavaScript permite a un sitio web para responder a eventos de usuario , cambiar el contenido de una página basada en diversas acciones de teclado y ratón . Menús y botones a menudo sirven como disparadores para esos cambios, pero DIVs pueden ser igualmente sensibles . A DIV es una etiqueta HTML que sirve como contenedor de otro contenido , como texto y fotos. Pasando el ratón sobre cualquier parte de la DIV puede desencadenar un cambio. Al mover el ratón fuera del DIV puede desencadenar otro . Instrucciones
1

Insertar una función auxiliar entre las etiquetas de la cabeza que le permite a su script funcione en todos los navegadores . La función añadir detectores de eventos a elementos HTML de la página. Cuando se le llama, la función auxiliar toma tres argumentos , o conjuntos de instrucciones : . El elemento de destino , el tipo de evento y función para llamar
función

addEvent (obj , tipo, fn ) {
< p > if ( obj.attachEvent ) {

obj [' e' + tipo + fn ] = fn ;

obj [Tipo fn + ] = function ( ) { obj [' e' + tipo fn + ] ( window.event ) ;}

obj.attachEvent ( 'on' + tipo obj [Tipo fn + ] ) ; } else

obj . addEventListener (tipo, fn , false) ; }

2

Crear una función entre las etiquetas de la cabeza que utiliza el evento de carga o la carga de la página en la ventana , para llamar la función " testMouse " . Esto conectar dos detectores de eventos a tu DIV :

window.onload = testMouse ;
3

Crear funciones que se traducirá en el color de su DIV cambiar en la página basado en el mouseover y eventos mouseout . Comience por crear " testMouse ", que le conseguirá el DIV por su ID de " testDiv . " Preste atención a los eventos mouseover o mouseout y llamar a las funciones " addColor " o " removeColor " , respectivamente . Cree la función " removeColor " que cambian el color de fondo " addColor " e imágenes

testMouse function () { var

divField = document.getElementById ( " testDiv " ) .
< P > addEvent ( divField , " mouseover " , addColor ) ;

addEvent ( divField , ' mouseout ' , removeColor ) ;

}

addColor function () {

var removeColor () { var

divField = document.getElementById ( " testDiv ");

divField.style.backgroundColor = ""; }

4

Place tus etiquetas DIV y texto de ejemplo entre las etiquetas del cuerpo del documento :