Обяснен CSS селектор за задържане (с пример)

CSS :hoverселекторът е един от многото псевдокласове, които се използват за стилизиране на елементи. :hoverсе използва за избор на елементи, върху които потребителите задръжават курсора или мишката. Може да се използва за всички елементи, не само за връзки.

Когато се използва за стил връзки, :hoverчесто е свързан с :link, :visitedи :activeселектори, който стил непосетени, посетили и активни връзки, съответно.

Ако :linkи :visitedправилата са в дефиницията на CSS, :hoverтрябва да попаднат след тях. В противен случай стиловете в :hoverправилото няма да бъдат приложени към избрания елемент.

Синтаксис:

a:hover { /* CSS declarations */ }

Селекторът за задържане на курсора прилага стиловете, предвидени в правилото, само когато елемент влезе в състояние на задържане. Това обикновено се случва, когато потребител се задържи над елемента с мишката.

button { color: white; background-color: green; } button:hover { background-color: white; border: 2px solid green; color: green; }

В горния пример нормалният стил на бутона е бял текст върху зелен бутон. Когато потребителят задържи курсора на мишката над бутона, правилото с :hoverселектора ще стане активно и стилът на бутона ще се промени.

Имайте предвид, че това :hoverможе да е проблематично за сензорните екрани - различните внедрения на хардуер и мобилен браузър могат да доведат до задействане на псевдокласа в някои случаи, а в други не. Не забравяйте да тествате щателно елементи с възможно :hoverнай-много различни мобилни браузъри и устройства.