Hur Kontrollera om musen är över DIV JavaScript

Javascript gör en webbplats för att svara på användarens händelser , ändra innehållet i en sida baserad på olika mus och åtgärder tangenttryckningar . Menyer och knappar fungerar ofta som utlösare för dessa förändringar , men DIV kan vara lika lyhörd . En DIV är en HTML-tagg som fungerar som en behållare för annat innehåll , till exempel text och bilder . Musen över någon del av DIV kan utlösa en förändring. Flytta musen utanför DIV kan utlösa en annan. Instruktioner
1

Sätt ett hjälparfunktion mellan ditt huvud taggar som låter ditt manus arbete i alla webbläsare . Funktionen kommer att lägga till händelseavlyssnare till HTML-element i sidan . När det kallas , tar hjälparfunktion tre argument , eller uppsättningar av instruktioner : . Målelementet , typ av händelse och funktion för att ringa

funktion addEvent ( obj , typ , fn ) {

if ( obj.attachEvent ) {

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

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

obj.attachEvent ( ' på ' + typ , obj [ typ + fn ] ) ;

} else

obj . addEventListener ( typ , fn , false ) ;

}
2

Skapa en funktion mellan huvudet taggar som använder lasten händelsen , eller att sidan laddas i fönstret , för att ringa den " testMouse "-funktion. Detta kommer att fästa två händelseavlyssnare till DIV :

window.onload = testMouse ,
3

Skapa funktioner som kommer att resultera i färgen på din DIV förändras på sidan baserat på mouseover och evenemang mouseOut . Börja med att skapa " testMouse , " som kommer att få DIV genom dess ID av " testDiv . " Lyssna för mouseover eller mouseOut händelser och kallar de " addColor " eller " removeColor " funktioner , respektive. Skapa " addColor " och " removeColor " funktioner som ändrar bakgrundsfärgen
testMouse

function () {

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

addEvent ( divField , ' mouseover ' , addColor );

addEvent ( divField , ' mouseOut ' , removeColor );

}

funktion addColor () {

var removeColor ( ) {

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

divField.style.backgroundColor = " " ;

}
4

Placera din div-taggar och prov text mellan body-taggarna i ditt dokument :