Cum se face o inscripție sau un indiciu sub cursorul mouse-ului pe jquery

Vreau să vorbesc despre o altă problemă pe care trebuia să o rezolv pe JQuery.

A apărut un bloc specific pe pagină (element div). Clientul a trebuit să facă acest lucru, astfel încât atunci când plasați cursorul mouse-ului pe acest bloc, apare lângă cursorul mouse-ului un indicator de instrument. Acest sfat era un text pe un fundal alb. A fost important ca atunci când cursorul mouse-ului a părăsit blocul selectat, indiciul a dispărut.

În cele din urmă, ar trebui să arate ceva de genul:

Să începem cu conținut HTML:

Floatingmes - bloc cu un indiciu care va apărea

Bloc - Blocul principal, când plasați cursorul indicatorul mouse-ului peste care va apărea un sfat de instrucțiuni.

Stilurile CSS pentru aceste blocuri sunt după cum urmează:

Și, în final, scripturile care fac mișcarea promptă:

Pentru elementul de bloc, este creat un eveniment de mousemove și mouseleave care va fi executat atunci când cursorul se mișcă în jurul blocului și când mouse-ul se îndepărtează de el.

Când mouse-ul "lasă" blocul, indiciul pur și simplu dispare.

Când cursorul mouse-ului reintră în bloc, vom arăta un indiciu

Și schimbați poziția, în funcție de locul unde se află cursorul cu decalajul, 10 pixeli.

Algoritmul este despre asta. Sper ca exemplul să fie util și să îl luați pentru serviciu.

Apropo, dacă sunteți interesat, lucrez la configurarea unor sisteme de analiză web pentru site-uri (Yandex Metrics și Google Analytics).

Cum se face o inscripție sau un indiciu sub cursorul mouse-ului pe jquery

Dacă doriți să faceți site-ul dvs. mai eficient și că aduce mai mulți bani, analizele web vă pot ajuta în acest sens.

Cu ajutorul instrumentului "Obiective" puteți obține rezultate bune în această afacere. Citiți mai multe aici.