See artikkel demonstreerib tööriistavihjet, kasutades tavalist JavaScripti.
Kuidas luua tavalist JavaScripti tööriistavihjet?
JavaScripti abil kohtspikri loomiseks kasutage ' kursor üle ” ja „ hiire väljas ” sündmused. Parema mõistmise huvides järgige alltoodud näiteid.
Näide 1: JavaScripti kasutamine
Antud näites loome tööriistaspikri puhtas JavaScriptis ja ka stiilime, kasutades ' stiilis ” atribuut.
Esmalt looge tekst, kus soovime näidata hiirekursori sündmuse kohta vihjet:
< h5 id = 'tekst' > Linux h5 >
Hankige tekst, kus kohtspikker kuvatakse, kasutades ' getElementById() ” meetod:
kus lh = dokument. getElementById ( 'tekst' ) ;
Nüüd helistage ' addEventListener() ' meetod, jättes ' kursor üle ” sündmus ja parameetrina funktsioon(). Määratletud funktsioonis loome kõigepealt kohtspikri, luues ' div ” elementi, määrake kursoril kuvatav tekst ja määrake kohtspikri stiili, kasutades ' stiilis ” atribuut. Lõpuks lisage kohtspikker, kasutades ' appendChild() ” meetod:
lh. addEventListener ( 'hiir üle' , funktsioon ( ) {oli tööriistavihje = dokument. looElement ( 'div' ) ;
tööriistavihje. sisemine HTML = 'Parim veebisait oskuste õppimiseks' ;
tööriistavihje. stiilis . nähtavus = 'nähtav' ;
tööriistavihje. stiilis . positsiooni = 'absoluutne' ;
tööriistavihje. stiilis . taustavärv = 'rgb(107, 101, 101)' ;
tööriistavihje. stiilis . polsterdus = '5px' ;
tööriistavihje. stiilis . piiriraadius = '3px' ;
tööriistavihje. stiilis . värvi = 'valge' ;
tööriistavihje. stiilis . vasakule = 'viiskümmend%' ;
tööriistavihje. stiilis . laius = '200 pikslit' ;
dokument. keha . lisalaps ( tööriistavihje ) ;
} ) ;
Siin kasutage ' hiire väljas ” sündmus, mis eemaldab kohtspikri, samal ajal kui kursor liigub tekstist eemale:
lh. addEventListener ( 'hiir väljas' , funktsioon ( ) {
dokument. keha . eemalda laps ( tööriistavihje ) ;
} ) ;
Väljund
Näide 2: Tööriistavihje JavaScripti kasutamine CSS-iga
CSS-i abil saate luua ka JavaScriptis kohtspikri.
Selleks looge märgendi abil kohtspikri teksti kuvamiseks ala ja määrake ID ' #minuTööriistavihje ”:
< span id = 'minu tööriistavihje' > ulatus >Hankige teksti viited ja kohtspikker, kasutades ' getElementById() ” meetod:
kus lh = dokument. getElementById ( 'tekst' ) ;oli tööriistavihje = dokument. getElementById ( 'minu tööriistavihje' ) ;
Helista tööriistaspikrile kursor üle ” sündmus, määrates funktsiooni teksti kasutades „ sisemine HTML ” vara:
lh. addEventListener ( 'hiir üle' , funktsioon ( ) {tööriistavihje. stiilis . nähtavus = 'nähtav' ;
tööriistavihje. sisemine HTML = 'Parim veebisait oskuste õppimiseks' ;
} ) ;
Peida tööriistavihje ' hiire väljas sündmus, määrates nähtavus ' vara ' peidetud ”:
lh. addEventListener ( 'hiir väljas' , funktsioon ( ) {tööriistavihje. stiilis . nähtavus = 'peidetud' ;
} ) ;
Loo ID ' #minuTööriistavihje ” stiililehel, mis kujundab kohtspikri stiili:
#minuTööriistavihje {nähtavus : peidetud ;
laius : 200 pikslit ;
Koos - indeks : 1 ;
taustal - värvi : rgb ( 107 , 101 , 101 ) ;
tekst - joondada : Keskus ;
värvi : valge ;
polsterdus : 5 pikslit 0 ;
piir - raadius : 3 pikslit ;
vasakule : viiskümmend %;
}
Nagu näete, on kohtspikker tekstile edukalt rakendatud:
Kuidas luua tööriistavihje HTML-i ja CSS-i abil?
Tööriistaspikri saate luua ka ilma JavaScriptita. Looge HTML-failis tekst ' Linux ”, kus sellel kursorit hõljutades kuvatakse kohtspikker. Looge element , et määrata kohtspikri tekst pealkirja/teksti sees:
Linux
< ulatus klass = 'tööriista vihjetekst' >
Platvorm oskuste õppimiseks
ulatus >
h5 >
Looge stiililehel klass või ID, mis määratakse HTML-i elementidele. Siin loome klassi ' tööriistavihje ', mis on määratud pealkirjale:
. tööriistavihje {positsiooni : sugulane ;
kuva : järjekorras - blokk ;
}
Määratlege klass ' tööriistavihjetekst ', et kujundada kohtspikri teksti stiil ja määrata sellele HTML' ” silt:
. tööriistavihjetekst {nähtavus : peidetud ;
laius : 150 pikslit ;
taustal - värvi : rgb ( 107 , 101 , 101 ) ;
värvi : #fff ;
tekst - joondada : Keskus ;
polsterdus : 5 pikslit 0 ;
piir - raadius : 3 pikslit ;
positsiooni : absoluutne ;
Koos - indeks : 1 ;
põhja : 125 %;
vasakule : viiskümmend %;
marginaal - vasakule : - 60 pikslit ;
läbipaistmatus : 0 ;
üleminek : läbipaistmatus 0,3 s ;
}
Määra ' hõljuma ' efekt koos ' tööriistavihje ” klassis, et kuvada hõljutusefekti kohta vihje:
. tööriistavihje : hõljuma . tööriistavihjetekst {nähtavus : nähtav ;
läbipaistmatus : 1 ;
}
Väljund
Oleme koostanud kõik vajalikud juhised, mis on olulised tavalise JavaScripti tööriistaspikri jaoks.
Järeldus
JavaScripti abil kohtspikri loomiseks kasutage ' kursor üle ” ja „ hiire väljas ” sündmused, mis kuvab tööriistaspikri elemendil hõljutades ja peidab selle, kui käivitatakse hiirekursor. Vahendispikri stiili kujundamiseks kasutage ' stiilis ” atribuut JavaScriptis. Selles artiklis tutvustasime parimaid võimalikke näiteid kohtspikri loomise kohta, kasutades tavalist JavaScripti, JavaScripti CSS-iga ja ilma JavaScriptita.