Come controllare se il mouse si trova sopra DIV in JavaScript

June 27

Come controllare se il mouse si trova sopra DIV in JavaScript


JavaScript consente a un sito web per rispondere a eventi utente, cambiando il contenuto di una pagina in base a vari mouse e le azioni di tasti. I menu ei pulsanti servono spesso come trigger per questi cambiamenti, ma div possono essere altrettanto reattivo. Un DIV è un tag HTML che funge da contenitore per altri contenuti, come testi e foto. Mouse sopra qualsiasi parte del DIV può innescare un cambiamento. Muovendo il mouse fuori dal DIV può innescare un altro.

istruzione

1 Inserire una funzione di supporto tra i tag di testa che lascia il vostro lavoro scritto in tutti i browser. La funzione aggiungerà listener di eventi agli elementi HTML nella pagina. Quando viene chiamato, la funzione di supporto prende tre argomenti, o insiemi di istruzione: l'elemento di destinazione, tipo di evento e la funzione da chiamare.

Funzione addEvent (obj, tipo, fn) {

if (obj.attachEvent) {

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

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

obj.attachEvent ( 'on' + tipo, obj [tipo + Fn]);

} altro

obj.addEventListener(type, fn, false);

}

2 Creare una funzione tra i tag di testa che utilizza l'evento di carico, o il caricamento pagina nella finestra, per chiamare la funzione "testMouse". Ciò collegare due listener di eventi al DIV:

window.onload = testMouse;

3 Creare le funzioni che si tradurrà nel colore della vostra DIV cambiare sulla pagina in base agli eventi mouseover e mouseOut. Inizia con la creazione di "testMouse", che otterrà il DIV con il suo ID di "testDiv." Ascoltare per gli eventi mouseover o mouseOut e chiamare le funzioni "addColor" o "removeColor", rispettivamente. Creare il "addColor" e funzioni "removeColor" che cambiano il colore di sfondo.

funzione testMouse () {

var divField=document.getElementById("testDiv");

addEvent (divField, 'mouseover', addColor);

addEvent (divField, 'mouseout', removeColor);

}

Funzione addColor () {

var divField=document.getElementById("testDiv");

divField.style.backgroundColor = "# CCC";

}

Funzione removeColor () {

var divField=document.getElementById("testDiv");

divField.style.backgroundColor = "";

}

4 Posizionare i tag DIV e testo di esempio tra i tag body del documento:

<Div id = "testDiv">

<P> Testo qui il testo qui testo qui. </ P>

</ Div>

5 Posizionare gli stili CSS per il vostro DIV tra i tag head per renderlo una dimensione fissa e dargli uno sfondo blu:

<Style type = "text / css">

testDiv {width: 200px; Altezza: 50px; background-color: # 6699CC; padding: 5px 5px 5px 10px; }

</ Style>

6 Salvare la pagina e aprirlo in un browser per testare il vostro codice. Mouse sopra il vostro DIV dovrebbe trasformarlo da blu a grigio. Spostando il mouse fuori dal DIV dovrebbe riaccenderlo al grigio.

Il codice completo dovrebbe essere simile a questo:

<Html>

<Head>

<Style type = "text / css">

testDiv {width: 200px; Altezza: 50px; background-color: # 6699CC; padding: 5px 5px 5px 10px; }

</ Style>

<Script type = "text / javascript">

Funzione addEvent (obj, tipo, fn) {

if (obj.attachEvent) {

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

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

obj.attachEvent ( 'on' + tipo, obj [tipo + Fn]);

} altro

obj.addEventListener(type, fn, false);

}

window.onload = testMouse;

funzione testMouse () {

var divField=document.getElementById("testDiv");

addEvent (divField, 'mouseover', addColor);

addEvent (divField, 'mouseout', removeColor);

}

Funzione addColor () {

var divField=document.getElementById("testDiv");

divField.style.backgroundColor = "# CCC";

}

Funzione removeColor () {

var divField=document.getElementById("testDiv");

divField.style.backgroundColor = "";

}

</ Script>

</ Head>

<Body>

<Div id = "testDiv">

<P> Testo qui il testo qui testo qui. </ P>

</ Div>

</ Body>

</ Html>