Share
Recent am publicat un tutorial cu privire la modul de creare a tooltip-urilor CSS3 fără scripturi? Astăzi, postăm o versiune îmbunătățită de script care este prietenoasă cu SEO și folosește o mică magie jQuery pentru ao face animată poziției mouse-ului!
Seturile de instrumente sunt folosite pentru a afișa informații suplimentare atunci când o legătură este suspendată. Atunci când creăm legături pe site-ul nostru, este întotdeauna o bună practică să adăugăm titluri la link-uri în beneficiul SEO. Aceste titluri sunt afișate când plasați cursorul peste un link, dar nu are niciun brand sau stil personalizat. În acest tutorial vă voi îndruma prin procesul de:
În acest fel vom îmbunătăți experiența utilizatorului și, în același timp, vom păstra totul frumos și curat pentru motoarele de căutare și beneficii SEO.
Să începem prin adăugarea mai întâi a marcajului în interiorul cap din documentul nostru. Am adăugat două foi de stil:
"Style.css" și "Tooltips.css". Puteți elimina ultima o dată când doriți să implementați propria dvs. lucrare, dar o vom folosi în demo. Foaia de stil
"Style.css" conține toate stilurile CSS care vor formata sfaturile noastre de instrumente. Am adăugat, de asemenea, referința bibliotecii JQuery Javascript. Acum e marcajul capului de document.
Link Tooltips Folosind CSS3 și JQuery
Acum, trebuie să adăugăm marcajul pentru legăturile cu sfaturi. În abordarea mea pentru a face link-uri pentru a afișa tooltips, trebuie să adăugăm o legătură cu atributul de clasă
"Tooltip_link". Acesta va schimba stilul de bază și vom adăuga un nume suplimentar al fiecărei clase
"stânga", "centru" sau "dreapta" pentru a specifica poziția săgeții degetului îndreptată spre stânga, spre dreapta sau spre dreapta. În cele din urmă, adăugăm câteva titluri la link-urile care trebuie afișate. Acum, aici este marcajul legăturilor.
Bara de instrumente din stânga Centrul Tooltip Tooltip dreapta
Acum trebuie să determinăm modul în care va fi marcajul de tip tooltip, astfel încât să putem baza stilurile și codarea pe baza acesteia. Vom folosi o bază
"Div" eticheta cu atributul de clasă din "Tooltip" și unul dintre aceste nume de clasă
"stânga", "centru" sau "dreapta". Înăuntru, vom plasa textul sfatului de instrument. Acum, aici este marcajul tooltip.
Un text de tip tooltip
Mai intai, incepem prin modelarea link-ului in sine prin stabilirea pozitiei sale „Rudă“ astfel încât să putem poziționa tooltip-ul relativ la link.
a.tooltip_link poziție: relativ! important;
Acum trebuie să adăugăm stilul CSS pentru instrumentul de bază pe care îl vom folosi numele clasei
"Tooltip". Trebuie să ascundem simbolul pentru a putea fi afișat utilizând JQuery atunci când link-ul este plutind, setați poziția la
"absolut" astfel încât să putem seta poziția în raport cu link-ul însuși, setați lățimea la
200px, A 5px padding, o margine inferioară de
12px pentru a face un spațiu pentru săgeată, setați culoarea textului la alb, z-index la
100 pentru a fi pe partea de sus a întregului conținut, 100% din partea de jos, setați culoarea de fundal la
transparent albastru cu unele stiluri de fonturi și texte.
Rețineți că puteți schimba stilul la ceea ce doriți, demo-ul va folosi stiluri vizuale simple intenționate din motive de simplitate.
.tooltip display: nici unul; poziție: absolut! important; lățime: 200px; fundal: rgba (61,102,143,0,9); padding: 5px; margine: 0 0 12px 0; culoare: #fff; z-index: 100; fund: 100%; text-align: centru; font-weight: bold; font-size: 11px;
Să adăugăm stilul general pentru săgeata degetului, folosind elemente puesdo
"după" și "inainte de". Noi stilul "după" elementul puesdo care va forma săgeata completă a stângii și a dreptului și a jumătății săgeții din instrumentul central, prin setarea acesteia pentru a nu avea conținut, poziția absolută, setarea culorii de margine la fel ca cea pe care am folosit-o pentru fondul de instrument cu lățimea totală și
"-14px" din partea inferioară a instrumentului. "inainte de" elementul puesdo are aproape același stil ca și
"după" elementul puesdo.
.tooltip: după content: ""; poziție: absolut! important; fund: -14px; z-index: 100; graniță: 0 rgba solidă (61,102,143,0.9); margine de fund: 14px solid transparent; lățime: 100%; .tooltip: înainte de content: ""; poziție: absolut! important; graniță: 0 rgba solidă (61,102,143,0.9); fund: -14px; z-index: 100;
Pentru a modela indicativul cu săgeata stânga pe care o folosim "stânga" am clasificat clasa cu o rază de graniță din toate colțurile, cu excepția celui din stânga jos, apoi am modelat marginea din stânga și poziția din stânga îndepărtată pentru elementul "după" puesdo. Pentru săgeata dreapta, schimbăm raza de graniță și setăm marginea dreaptă și o poziționăm din dreapta. Instrumentul de săgeată centru va stabili raza de graniță la toate colțurile, acum aici trebuie să stil atât de
"după" și "inainte de" elementele puesdo.
"după" elementul puesdo are o frontieră stângă cu 50% din lățime și
50% din partea stângă, "inainte de" elementul puesdo are o frontieră dreaptă și o margine de fund transparent, cu
50% din lățime și 50% din dreapta.
.tooltip.left limita-raza: 5px 5px 5px 0; .tooltip.left: după border-left-width: 14px; stânga: 0; .tooltip.right border-radius: 5px 5px 0 5px; .tooltip.right: după border-right-width: 14px; dreapta: 0; .tooltip.center border-radius: 5px; .tooltip.center: după border-left-width: 10px; lățime: 50%; stânga: 50%; .tooltip.center: înainte de border-right-width: 10px; margine de fund: 14px solid transparent; lățime: 50%; drept: 50%;
Pentru a obține funcționalitatea dorită, trebuie să adăugăm codul JQuery în interiorul unei etichete de script înainte de eticheta de închidere a corpului. Vom folosi evenimentele mouse-ului pentru a determina funcționalitatea pe care dorim să o creăm.
"Mouseenter" incendiu eveniment atunci când cursorul mouse-ului intră în orice parte a elementului în cauză, care este în acest caz
"A" sau link element, acest lucru va funcționa numai atunci când link-ul are mai mult de zero caracter în atributul titlu. Aici trebuie să facem următoarele:
Accentsconagua
$ ("a") mousecenter (funcția (e) // eveniment declanșat atunci când cursorul mouse-ului introduce elementul "a" var $ class_name = $ (this) .attr ("class"). (a) elementul "a" după ce a lăsat 13 caractere care este egal cu "tooltip_link" var $ x = e.pageX - this.offsetLeft; // obține mouse-ul coordonate în raport cu elementul "a" var $ tooltip_text = $ (this) .attr ("title"); // obține atributul de titlu al elementului "a" dacă ($ tooltip_text.length> 0) // afișa tooltipul numai dacă are mai mult de zero caractere $ (this) .append (''+ $ tooltip_text +'„); / / append markup tooltip, introduceți numele clasei și titlul instrumentului din valorile de mai sus $ ("a> div.tooltip.center"). css ("stânga", "+ $ x - 103 +" px "); // setați poziția tooltip din stânga $ ("a> div.tooltip.left"). css ("stânga", "+ $ x +" px); // setați poziția tooltip din stânga $ ("a> div.tooltip.right"). css ("stânga", "+ $ x - 208 +" px "); // setați poziția tooltip din stânga $ ("a> div.tooltip." + $ class_name) .fadeIn (300); // afișează, animă și se estompează în tooltip); "Mouseleave" evenimentul se declanșează atunci când cursorul mouse-ului părăsește
"A" sau element de legătură. În acest atribut vom inversa pur și simplu tot ceea ce am făcut
"Mouseenter" eveniment. Vom primi partea de atribut nume de clasă din link, apoi vom șterge tooltip-ul care va seta proprietatea afișajului
"nici unul" și să utilizeze durata de animație a 300ms, atunci va trebui să întârziem următoarele funcții
300ms până când animația se estompează. Acum, pentru a elimina marcajul tooltip, trebuie să îl plasăm într-o coadă personalizată și apoi trebuie să închidem coada noastră utilizând
"Dequeue" care permite coada principală să continue.
$ ("a") mouseleave (function () // eveniment declanșat atunci când cursorul mouse-ului părăsește elementul "a" var $ class_name = $ (this) .attr ("class"). atributul elementului "a" după ce a lăsat 13 caractere care este egal cu "tooltip_link" / / a decupla tooltip-ul, a întârzia timp de 300ms și apoi a șterge tooltip-ul și a încheia coada particularizată $ ("a> div.tooltip. ) .fadeOut (300) .delay (300) .queue (funcția () $ (aceasta) .remove (); $ (this) .dequeue (););); Rezultatul final ar trebui să arate ca imaginea de mai jos. Pentru ca rezultatul final să arate exact ca demo-ul nostru, ar trebui să folosiți stilurile din interior
"Tut.css", dar nu ezitați să adăugați propriile ajustări.
Sper că ați învățat cu toții niște tehnici de la tutorialul nostru CSS și JQuery! Împărtășește-ți gândurile de mai jos :)
