Циљ овог приручника је да истражи како да промените слику при лебдењу помоћу ЦСС-а. Дакле, почнимо!
Шта је :ховер у ЦСС-у?
:ховер је елемент псеудо-класе који се користи за промену стања ХТМЛ елемената када га миш покрене. Овај ЦСС селектор се првенствено користи за стилизовање или одабир елемената. Међутим, не може се применити на везе.
Синтакса
Синтакса :ховер је дата у наставку:
елемент : лебдети {
ЦСС код. . .
}
Овде, „ елемент ” се односи на елемент на који желите да примените ефекат лебдења.
Сада ћемо прећи на практичан пример промене слике при лебдењу помоћу ЦСС-а.
Пример: Како променити слику при лебдењу помоћу ЦСС-а?
Да бисте прво променили слику када пређете курсором, додајте две слике у ХТМЛ одељак. Прва слика је за активно стање, а следећа је за стање лебдења.
Корак 1: Додајте слике
За наведену сврху, додаћемо две слике, „ имаге1 ' и ' имаге2 “, и доделите назив класе другој слици као „ ховер_имг ”.
ХТМЛ
< тело >< див класа = 'имг' >
< имг срц = 'имаге1.пнг' >
< имг срц = 'имаге2.пнг' класа = 'ховер_имг' >
< / див >
< / тело >
Корак 2: Стилизирајте слике
Сада пређите на ЦСС да бисте подесили позицију обе слике користећи „ положај ' имовина. Поставићемо њену позицију као „ апсолутна ” да га позиционира апсолутно у односу на његовог најближег родитеља.
ЦСС
.имг {положај : апсолутна ;
}
Ово ће показати следећи резултат:
У следећем кораку поставићемо другу слику испред прве. Да бисмо то урадили, поставићемо позицију слике као „ апсолутни ” и поставите горњу и леву позицију као „ 0 ”. Коришћење ове слике је постављено испред прве слике, али желимо да прикажемо другу слику када миш пређе на њу. Дакле, постављање вредности на екрану као „ ниједан ” ће показати жељени резултат:
.ховер_имг {положај : апсолутна ;
топ : 0 ;
лево : 0 ;
приказ : ниједан ;
}
Излаз датог кода је следећи:
Друга слика је успешно сакривена иза прве слике.
Сада пређите на следећи корак.
Корак 3: Промените слику при лебдењу
Затим користите „ :лебдети ” и изаберите „ .имг ” да бисте применили курсор на изабрани елемент. Затим доделите назив класе другој слици “ .ховер_имг ”. Након тога, унутар заграда, поставите вредност својства приказа као „ у реду ” што ће приморати елемент да стане у исти ред:
.имг : лебдети .ховер_имг {приказ : у реду ;
}
Ево резултата који показује да се слика мења када корисник пређе мишем на њу:
Горе наведени излаз показује да смо успешно променили слику при лебдењу помоћу ЦСС-а.
Закључак
Слика се може променити када пређете мишем помоћу „ :лебдети ” елемент псеудокласе. Да бисте то урадили, додајте потребне слике у ХТМЛ датотеку, поставите их на исту позицију помоћу ЦСС-а и примените селектор :ховер на њих. Као резултат, прва слика ће се променити када пређете мишем преко ње. У овом чланку смо објаснили како да промените слику при лебдењу помоћу :ховер са практичним примером.