TechCodeview

Шта је ЦСС Ховер?

Селектор :ховер у ЦСС-у примењује стилове на елемент док курсор лебди изнад њега. Често се користи за стварање интерактивних ефеката или за привлачење пажње на елементе када су у интеракцији са њима.

Можете циљати елемент помоћу селектора :ховер користећи назив ознаке, класу или ИД.

На пример:

влц медиа плаиер преузимање иоутубе

 .button:hover { background-color: #ff0000; color: #ffffff; } 

Боја позадине у претходном примеру ће постати црвена (#фф0000) када корисник пређе мишем преко елемента са класом 'дугме', док ће боја текста постати бела (#фффффф).

Различити ефекти лебдења могу се произвести комбиновањем :ховер селектора са другим ЦСС елементима као што су величина фонта, ивица или трансформација. То је моћан алат за побољшање визуелних повратних информација и интерактивности ваше веб странице или апликације.

Синтакса:

 :hover { css declarations; } 

Узмимо неке примере да бисмо разумели лебдење помоћу ЦСС-а:

Пример 1:

ХТМЛ код:

 Hover Me 

ЦСС код:

јава отворена датотека

 .hover-button { background-color: #eaeaea; color: #333333; padding: 10px 20px; border: none; cursor: pointer; transition: background-color 0.3s ease; } .hover-button:hover { background-color: #ff0000; color: #ffffff; } 

Објашњење:

У горњем примеру имамо дугме са дугметом за лебдење класе. Почетне комбинације боја дугмета су светло сива позадина (#еаеаеа) и тамно сиви текст (#333333). Када миш пређе преко дугмета, боја позадине се мења у црвену (#фф0000), а боја текста у белу (#фффффф).

Са трајањем од 0,3 секунде и функцијом за једноставно мерење времена, својство прелаза у класи дугмета за лебдење обезбеђује флуидан прелаз за промену боје позадине када миш пређе преко дугмета.

Остали елементи, као што су везе ( ), слике ( ), дивс ( ) или било који други елемент који желите да учините интерактивним, може користити сличне ефекте лебдења. Можете креирати различите ефекте лебдења који одговарају вашим потребама дизајна тако што ћете променити својства и вредности унутар :ховер селектора.

Пример 2: ефекат зумирања слике

ХТМЛ код:

ЦСС код:

замењивање метода у Јави

 .image-zoom { overflow: hidden; } .image-zoom img { transition: transform 0.3s ease; } .image-zoom:hover img { transform: scale(1.2); } 

Пример 3: Ефекат подвлачења везе

ХТМЛ код:

 <a href="#">Hover Me</a> 

ЦСС код:

 .underline-link { text-decoration: none; transition: border-bottom 0.3s ease; } .underline-link:hover { border-bottom: 2px solid #ff0000; } 

Функција Ховер у ЦСС-у

Можете да побољшате интерактивност и визуелне ефекте својих веб страница коришћењем функције ЦСС:ховер, која нуди низ предности и функција. Следе неке основне карактеристике ЦСС лебдења:

Интерактивни ефекат:Интерактивни ефекти се могу произвести променом изгледа елемената када се пређе преко селектора :ховер. Док корисници ступају у интеракцију са вашим садржајем, можете да промените својства као што су боја позадине, боја текста, непрозирност, сенка оквира, трансформација и још много тога да бисте им показали визуелне повратне информације.Циљање више елемената:Можете да изаберете више елемената на страници помоћу селектора :ховер. Ово подразумева да можете дизајнирати стандардизоване ефекте лебдења за различите елементе, укључујући дугмад, везе, слике, меније за навигацију и било који други елемент који желите да учините интерактивним.Подршка за прелазе и анимације::ховер селектор се може користити са ЦСС прелазима и анимацијама да би се произвели глатки, естетски угодни ефекти. Дефинисањем својстава прелаза или анимације, можете да одредите трајање, функцију времена и друга подешавања која се односе на анимацију да бисте регулисали како се стилови мењају када се пређе мишем изнад елемента.Додавање додатних селектора:Селектор :ховер се може користити са другим ЦСС селекторима да се фокусира на одређене елементе или примени стилове према унапред дефинисаним критеријумима. На пример, можете креирати јединствене и прилагођене ефекте лебдења комбиновањем :ховер селектора са селекторима класа, ИД селекторима или псеудо-елементима.Подржава доступност:Приступачност треба узети у обзир при развијању ефеката лебдења. Корисници помоћних технологија који користе курсор, као што су читачи екрана, можда неће имати приступ ефекту лебдења. Због тога се саветује да проверите да ли је примарна функционалност или садржај и даље читљив и употребљив без ефеката лебдења.Подршка за више прегледача:Већина модерних веб претраживача подржава функцију ЦСС: лебдење. То је компонента ЦСС спецификације компатибилна са најчешће коришћеним претраживачима, укључујући Цхроме, Фирефок, Сафари, Едге и друге. Ово обезбеђује доследност у изгледу и понашању на различитим платформама.