Come verificare se il mouse è sopra DIV in Javascript

Javascript consente a un sito web per rispondere a eventi utente , cambiando il contenuto di una pagina in base alle varie azioni del mouse e tasti . Menu e pulsanti servono spesso da trigger per questi cambiamenti , ma DIV può essere altrettanto reattivo. Un DIV è un tag HTML che funge da contenitore per altri contenuti , come ad esempio testo e foto. Passando qualsiasi parte del DIV può innescare un cambiamento . Muovendo il mouse fuori dal DIV può innescare un altro . Istruzioni
1

Inserire una funzione di supporto tra i tag head che consente al lavoro di sceneggiatura in tutti i browser . La funzione listener di eventi al elementi HTML nella pagina . Quando viene chiamato, la funzione di supporto prende tre argomenti , o insiemi di insegnamento: . L'elemento di destinazione , il tipo di evento e la funzione di chiamare

funzione addEvent ( obj , tipo , fn) {

se ( 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

creare una funzione tra i tag head che utilizza l'evento di carico , o il caricamento della pagina nella finestra, per chiamare la funzione " testMouse " . Questo allegare due listener di eventi per il tuo DIV :

window.onload = testMouse ;
3

creare funzioni che si tradurrà nel colore della vostra DIV cambiare nella pagina basato sul passaggio del mouse e gli eventi mouseout . Iniziare creando " testMouse ", che otterrà il DIV dal suo ID di " testDiv . " Ascoltare per gli eventi mouseover o mouseout e chiamare le funzioni " addColor " o " removeColor " , rispettivamente . Creare le funzioni " removeColor " che cambiano il colore di sfondo " addColor " e

funzione testMouse ( ) { var

divField = document.getElementById ( " testDiv ") .

addEvent ( divField , ' mouseover ' , addColor ) ;

addEvent ( divField , ' mouseout ' , removeColor ) ;

}

funzione addColor ( ) {

var removeColor ( ) { var

divField = document.getElementById ( " testDiv " ) ;

divField.style.backgroundColor = " " ; }

4

Luogo tuoi tag DIV e testo di esempio tra i tag body del documento :