Како применити Ховер у ЦСС са примерима



Овај чланак ће вам пружити детаљно и свеобухватно знање о томе како применити Ховер у ЦСС са примерима.

Каскадни табеле стилова (ЦСС) дизајнирани су помоћу или КСМЛ (укључујући КСХТМЛ, СВГ) формат. То је језик табеле стилова који се првенствено користи за описивање елемената кроз разнолике серије метода форматирања. Један од метода је лебдење и у овом чланку ћемо разумети Ховер у ЦСС-у на следећи начин:

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

ЦСС ховер је компонента селектора која се користи за обликовање различитих елемената када показивач миша лебди изнад њих. Могу се користити на скоро сваком ХТМЛ елементу. Карактеристика лебдења у ЦСС-у има значајну важност у дизајнирању веб страница.





Пређите курсором у ЦСС

Лебдећа компонента може да истакне, кодира и прилагоди веб странице према жељама корисника у компактном и ефектном програму за веб дизајнирање.



Где се користи Ховер?

Најчешћи примери одрживости функције задржавања показивача могу бити истакнути на главним веб локацијама за куповину као што су Флипкарт и Амазон. Када корисници задрже показивач миша на било ком производу на овим веб локацијама за е-трговину, производ је програмиран да изврши функцију аутоматског зумирања лебдења како би купцу пружио бољи преглед њихових изабраних производа. Кроз ово програмирање, веб страница је дизајнирана да прикаже компактни приказ целокупног асортимана производа праћен детаљним приказом производа од интереса у дизајну једне веб странице.

Шта Ховер ради?

Лебдење је вишенаменски алат за програмирање помоћу којег корисник може прилагодити циљни елемент бескрајним бројем критеријума форматирања. Неки примери оперативног знања о функцији лебдења укључују:

  • Промена боје позадине / фонта
  • Уграђивање скривеног текста који се приказује на показивачу миша
  • Створите ефекте преношења на сликама
  • Аутоматско зумирање текста / слика
  • Измените непрозирност слике
  • Уграђивање текста
  • Замјена слике
  • Див. Лебдети
  • Више других операција форматирања ЦСС Ховер-а.

Ефекат лебдења у основи мења вредност својства елемента како би омогућио анимирање промена наведеног текста / слике или одговарајућих елемената. Уграђивање ЦСС лебдећих елемената у дизајн веб странице претвара редовну веб страницу у интерактивну, робусну и високо функционалну веб страницу. Ови дизајни веб страница су једноставни за употребу и свеобухватни. Веб странице дизајниране лебдећим садржајем садрже већу привлачност потрошача и привлаче обавештење потенцијалних купаца.



Компатибилност Ховер-а у ЦСС-у

Функција лебдења је компатибилна са свим главним веб прегледачима. Међутим, примена овог елемента на додирним уређајима и даље представља изазов. Лебдење у ЦСС-у омогућава приступ садржају на уређајима који не подржавају функције лебдења. Примећено је да се активирана функција лебдења на уређају који не подржава може заглавити на уређају.

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

Како Ховер ради у ЦСС-у?

Активни стил псеудо-класе је доминантан у обликовању ЦСС ховер-а и надјачава било коју / све наредне везе које прати ова псеудо-класа. На пример, у псеудо-класи „: линк: посјетио, или: активан, правило: ховер мора бити постављено иза: линк и: посећено, али пре: активно за одговарајући: ховер стилинг. ЛВХА-налог:: линк,: ховер,: посјетио и: ацтиве користи се као референца за правилан: ховер обликовање стила.

див {боја позадине: зелена подлога: 18пк приказ: нема} распон: лебдење + див {приказ: блок}Лебдење тест!Скривени код се приказује при преласку показивача миша

У горе наведеном коду, елемент спан је модификован тако да спаја елемент ховер и див употребом елемента спан: ховер + див. Елемент распона који ће се приказати на примарној одредишној веб страници приказиват ће текст „Тест лебдења!“ Даље лебдење на елементу распона открива див елемент „Скривени код се приказује при лебдењу“. Овај формат уграђивања је оперативан за текст, као и за слике.

Промените боју позадине показивача миша у „црвену“

п: ховер, х1: ховер, а: ховер {бацкгроунд-цолор: Ред}

Лебди црвено

Лебди црвено

динамичко додељивање меморије у језику ц ++

Везе:

Црвени ховер тест:

Гоогле цом

Белешка: Здраво

Горњи код прилагођава

,

и елемент и интегрише их у заједничку функцију лебдења. Овај код је дизајниран да промени боју текста у црвену када показивач миша пређе преко њих. Компонента х1 и х2 приказује „ЦСС: Ховер Тест Цоде“ и „Ховер Ред“. Елемент пасуса: Тест лебдења црвено и ознака сидра: гоогле.цом постаје црвено означен када показивач миша лебди изнад њих.

Стварање непрозирности ховер-а на сликама

.пиц {ширина: 1900пк висина: 1900пк непрозирност: 1 филтер: алфа (непрозирност = 100) позадина: урл (хттпс://цдн.пикабаи.цом/пхото/2013/07/13/11/29/оранге-158258_1280. пнг) без понављања} .пиц: ховер {непрозирност: 0,2 филтер: алфа (непрозирност = 30)}

Горњи ЦСС програм приказује промену непрозирности слике при лебдењу. Оригинална непрозирност слике је један међутим, коришћењем филтера за задржавање непрозирности, исти је модификован на 0,2. Овај код показује да се употребом ховер елемента може изменити непрозирност слике и / или текста.

Креирање прекривања текста на сликама

.пиц {ширина: 4000пк висина: 2170пк позадина: урл (хттп://еатлогос.цом/фоод_анд_дринкс/пнг/вецтор_оранге_лого.пнг) без понављања} .тект {ширина: 3400пк висина: 2170пк позадина: #ФФФ непрозирност: 0} .пиц: ховер .тект {непрозирност: 0,6 поравнање текста: оправдај боју: # 000000 величина фонта: 20пк тежина фонта: 700 породица фонтова: 'Тимес Нев Роман', Тимес, сериф паддинг: 30пк} Наранџаста је влакна богато воће. Антиоксиданти присутни у поморанџи могу помоћи у варењу, учинити кожу сјајном и деловати као елемент против старења.

Раслојавање текста у ЦСС ховер ефикасан је алат за уградњу описног текста слике у саму слику. Овај алат помаже у пружању компактног прегледа слике без заузимања успаваног простора у ограниченом простору за веб дизајнирање. У овом коду слика позадине је уграђена са описним текстом који се приказује када показивач миша пређе преко текста.



Овим су закључени сви важни аспекти ховер-а у ЦСС-у и наглашена његова употребљивост у веб развоју. Постоји много специјалних ефеката које он може унети на наше веб странице. Увек можемо испробати различите комбинације селектора лебдења са другим ЦСС својствима као што су анимација, позадинске слике, хипервезе итд. И истражити његов потенцијал као што смо видели у неким нашим примерима. Коначно, ЦСС је један од најмоћнијих начина за дизајнирање и трансформисање веб страница, па је стога веб програмерима неопходно да стекну ову вештину како би направили динамичне веб странице.

Погледајте наш који долази са обуком уживо коју воде инструктори и искуством у стварном животу. Овај тренинг чини вас вештима за рад са позадинским и предњим веб технологијама. Обухвата обуку о веб развоју, јКуери-ју, Ангулар-у, НодеЈС-у, ЕкпрессЈС-у и МонгоДБ-у.

Имате питање за нас? Молимо вас да га помињете у одељку за коментаре блога „Лебдите у ЦСС-у“ и јавићемо вам се.