Aquest article mostrarà la informació sobre eines utilitzant JavaScript senzill.
Com crear una informació sobre eines de JavaScript senzilla?
Per crear una informació sobre eines amb JavaScript, utilitzeu el ' ratolí sobre ' i ' fora del ratolí ” esdeveniments. Seguiu els exemples que es donen a continuació per a una millor comprensió.
Exemple 1: informació sobre eines utilitzant JavaScript
En l'exemple donat, crearem una informació sobre eines en JavaScript pur i també l'estilitzarem amb el ' estil ” atribut.
Primer, creeu un text on volem mostrar una informació sobre eines a l'esdeveniment de passar el ratolí:
< h5 id = 'text' > Linux h5 >
Obteniu el text on apareixerà la informació sobre eines utilitzant el ' getElementById() ” mètode:
on lh = document. getElementById ( 'text' ) ;
Ara, crida al ' addEventListener() ” mètode passant el “ ratolí sobre ” esdeveniment i una funció () com a paràmetre. A la funció definida, primer, crearem una informació sobre eines creant un ' div ”, configureu el text que es mostrarà al passar el cursor i configureu algun estil de la informació d'eina mitjançant el ' estil ” atribut. Finalment, afegiu la informació sobre eines utilitzant el ' appendChild() ” mètode:
lh. addEventListener ( 'ratolí sobre' , funció ( ) {era informació sobre eines = document. createElement ( 'div' ) ;
informació sobre eines. innerHTML = 'El millor lloc web per aprendre habilitats' ;
informació sobre eines. estil . visibilitat = 'visible' ;
informació sobre eines. estil . posició = 'absolut' ;
informació sobre eines. estil . color de fons = 'rgb(107, 101, 101)' ;
informació sobre eines. estil . farciment = '5px' ;
informació sobre eines. estil . borderRadius = '3px' ;
informació sobre eines. estil . color = 'blanc' ;
informació sobre eines. estil . esquerra = '50%' ;
informació sobre eines. estil . amplada = '200px' ;
document. cos . appendChild ( informació sobre eines ) ;
} ) ;
Aquí, utilitzeu el ' fora del ratolí ” esdeveniment que eliminarà la informació sobre eines mentre el cursor s'allunyarà del text:
lh. addEventListener ( 'sortir el ratolí' , funció ( ) {
document. cos . removeChild ( informació sobre eines ) ;
} ) ;
Sortida
Exemple 2: informació sobre eines utilitzant JavaScript amb CSS
També podeu crear una informació sobre eines en JavaScript amb CSS.
Per fer-ho, creeu una àrea per mostrar el text de la informació sobre eines mitjançant l'etiqueta i assigneu un identificador ' #myTooltip ”:
< identificador d'abast = 'myTooltip' > span >Obteniu les referències del text i la informació sobre eines utilitzant el ' getElementById() ” mètode:
on lh = document. getElementById ( 'text' ) ;era informació sobre eines = document. getElementById ( 'myTooltip' ) ;
Truqueu a la informació sobre eines a la ' ratolí sobre ” esdeveniment configurant el text a la funció mitjançant el “ innerHTML ' propietat:
lh. addEventListener ( 'ratolí sobre' , funció ( ) {informació sobre eines. estil . visibilitat = 'visible' ;
informació sobre eines. innerHTML = 'El millor lloc web per aprendre habilitats' ;
} ) ;
Amaga la informació sobre eines a ' fora del ratolí ” esdeveniment configurant el “ visibilitat 'propietat a' amagat ”:
lh. addEventListener ( 'sortir el ratolí' , funció ( ) {informació sobre eines. estil . visibilitat = 'amagat' ;
} ) ;
Crea un identificador ' #myTooltip ” al full d'estil que donarà estil a la informació sobre eines:
#myTooltip {visibilitat : amagat ;
amplada : 200 píxels ;
Amb - índex : 1 ;
fons - color : rgb ( 107 , 101 , 101 ) ;
text - alinear : centre ;
color : blanc ;
farciment : 5 píxels 0 ;
frontera - radi : 3 píxels ;
esquerra : 50 %;
}
Com podeu veure que la informació sobre eines s'ha implementat correctament al text:
Com crear informació sobre eines amb HTML i CSS?
També podeu crear una informació sobre eines sense JavaScript. Al fitxer HTML, creeu el text ' Linux ”, on es mostrarà la informació sobre eines mentre hi passeu el cursor. Creeu l'element per establir el text per a la informació sobre eines dins de l'etiqueta d'encapçalament/text :
Linux
< span classe = 'text d'eina' >
Una plataforma per aprendre habilitats
span >
h5 >
Al full d'estil, creeu una classe o un identificador que s'assignarà als elements HTML. Aquí, crearem una classe ' informació sobre eines ” que s'assigna a l'encapçalament:
. informació sobre eines {posició : relatiu ;
visualització : en linia - bloc ;
}
Definiu una classe ' text d'eines ' per estilitzar el text de la informació sobre eines i assignar-li l'HTML ' ' etiqueta:
. text d'eines {visibilitat : amagat ;
amplada : 150 píxels ;
fons - color : rgb ( 107 , 101 , 101 ) ;
color : #fff ;
text - alinear : centre ;
farciment : 5 píxels 0 ;
frontera - radi : 3 píxels ;
posició : absolut ;
Amb - índex : 1 ;
inferior : 125 %;
esquerra : 50 %;
marge - esquerra : - 60 píxels ;
opacitat : 0 ;
transició : opacitat 0,3 s ;
}
Conjunt ' flotar ' efecte amb el ' informació sobre eines ” classe per mostrar la informació sobre eines sobre l'efecte de flotació:
. informació sobre eines : flotar. text d'eines {visibilitat : visible ;
opacitat : 1 ;
}
Sortida
Hem recopilat totes les instruccions necessàries rellevants per a la informació sobre eines de JavaScript senzilla.
Conclusió
Per crear una informació sobre eines amb JavaScript, utilitzeu el ' ratolí sobre ' i ' fora del ratolí ”, que mostra la informació sobre eines al passar el cursor sobre l'element i l'amaga quan s'activa l'esdeveniment de sortida del ratolí. Per dissenyar la informació sobre eines, utilitzeu el ' estil ”atribut en JavaScript. En aquest article, vam demostrar els millors exemples possibles de creació d'una informació sobre eines amb JavaScript senzill, JavaScript amb CSS i una informació sobre eines sense JavaScript.