Πώς να ελέγξετε αν το ποντίκι βρίσκεται πάνω σε DIV JavaScript

JavaScript επιτρέπει σε έναν ιστοχώρο για να ανταποκριθούν στις εκδηλώσεις του χρήστη , αλλάζοντας τα περιεχόμενα μιας σελίδας με βάση διάφορα ποντικιού και πληκτρολόγηση ενέργειες . Τα μενού και τα κουμπιά χρησιμεύουν συχνά ως έναυσμα για αυτές τις αλλαγές , αλλά divs μπορεί να είναι εξίσου καλή απόκριση. Η DIV είναι μια ετικέτα HTML που χρησιμεύει ως δοχείο για άλλο περιεχόμενο , όπως κείμενο και φωτογραφίες . Mousing πάνω από οποιοδήποτε μέρος του DIV μπορεί να προκαλέσει μία αλλαγή . Μετακινώντας το ποντίκι από το DIV μπορεί να προκαλέσει ένα άλλο . Οδηγίες
Η

1 Τοποθετήστε μια λειτουργία βοηθού μεταξύ των ετικετών κεφάλι σας που σας επιτρέπει την εργασία script σας σε όλους τους browsers. Η λειτουργία θα προσθέσει ακροατές εκδήλωση σε HTML στοιχεία της σελίδας . Όταν λέγεται, η λειτουργία βοηθός διαρκεί τρία επιχειρήματα , ή σύνολα διδασκαλίας : . Το στοιχείο προορισμού , το είδος της εκδήλωσης και τη λειτουργία για να καλέσετε

addEvent λειτουργία ( obj , το είδος , fn ) {

αν ( obj.attachEvent ) {

obj [ «e» τύπος + + fn ] = fn ?

obj [ + τύπος fn ] = λειτουργία () { obj [ «e» + πληκτρολογήστε + fn ] ( window.event ) ? }

obj.attachEvent ( «on» + τύπου , obj [ + τύπος fn ] ) ?

} else

obj . addEventListener (τύπος , fn , false) ?

} 2

Δημιουργήστε μια λειτουργία ανάμεσα στις ετικέτες κεφάλι που χρησιμοποιεί το συμβάν φορτίου , ή η φόρτωση της σελίδας στο παράθυρο , για να καλέσετε η " testMouse " λειτουργία. Αυτό θα δώσει δύο ακροατές εκδήλωση για DIV σας :

window.onload = testMouse ?
Εικόνων 3

Δημιουργήστε λειτουργίες που θα έχει ως αποτέλεσμα το χρώμα του DIV σας αλλάζει στη σελίδα με βάση τα γεγονότα και mouseover MouseOut . Ξεκινήστε με τη δημιουργία " testMouse », η οποία θα πάρει το DIV με ID της " testDiv . " Ακούστε για τις εκδηλώσεις mouseover ή MouseOut και να καλέσετε τον " addColor " ή " removeColor " λειτουργίες , αντίστοιχα . Δημιουργήστε τα " addColor " και " removeColor " λειτουργίες που αλλάζουν το χρώμα του φόντου

testMouse λειτουργία () { var

divField = document.getElementById ( " testDiv ")? .

addEvent ( divField , « mouseover » , addColor ) ?

addEvent ( divField , « MouseOut » , removeColor ) ?

} addColor

λειτουργία () {
var

removeColor ( ) { var

divField = document.getElementById ( " testDiv ")?

divField.style.backgroundColor = " " ?

}
Η 4

Τοποθετήστε ετικέτες DIV και το κείμενο του δείγματος μεταξύ των ετικετών σώμα του εγγράφου σας :

5

στυλ Place CSS για dIV σας ανάμεσα στις ετικέτες κεφάλι για να κάνουν ένα σταθερό μέγεθος κάνει και να δώσει μια μπλε φόντο :

Η 6

Αποθηκεύστε τη σελίδα σας και να το ανοίξετε σε ένα πρόγραμμα περιήγησης για να ελέγξετε τον κωδικό σας . Mousing πάνω DIV σας θα πρέπει να μετατραπεί από μπλε σε γκρι . . Μετακινώντας το ποντίκι σας από το DIV θα πρέπει να γυρίσει την πλάτη σε γκρι

Η πλήρης κώδικας θα πρέπει να μοιάζει κάπως έτσι :