Mundarija:

Hover effektlari nima?
Hover effektlari nima?

Video: Hover effektlari nima?

Video: Hover effektlari nima?
Video: CSS - Button Uchun Siz Bilmagan Hover effektlari (HTML5 va CSS3) 2024, Noyabr
Anonim

Hover effekti : Pop va fon animatsiyasi. Hover effekti mahsulot uchun. Tasvir yuqoriga va pastga tushadi, keyin fon siljiydi va jonlanadi.

Bundan tashqari, bilingki, rasm kursorni ko'tarayotganda matn qanday paydo bo'ladi?

Animatsiyalangan matnni faqat CSS3 yordamida hoverda tasvir ustida qanday ko'rsatish mumkin

  1. HTML yarating¶ Tasviringizni qo'shing

    teg va matn. Birinchidan, yordamida rasmingizni qo'shishingiz kerak

    teg.

  2. CSS-ni yarating¶ Set:hover selektori. Hover effekti elementni tanlaydigan va uslublaydigan:hover pseudo-class yordamida o'rnatiladi.

Bundan tashqari, siz hoverdan qanday foydalanasiz? :hover selektori sichqonchani ustiga sichqonchani bosib, elementlarni tanlash uchun ishlatiladi.

  1. Maslahat::hover selektori faqat havolalarda emas, balki barcha elementlarda ishlatilishi mumkin.
  2. Maslahat: Kirilmagan sahifalarga havolalarni uslublash uchun:link selektoridan, tashrif buyurilgan sahifalarga havolalarni uslublash uchun:visited selektoridan va faol havolani uslublash uchun:active selektoridan foydalaning.

Bu erda, CSS-da tasvirni qanday qilib ko'tarasiz?

Javob: CSS-ning fon tasviri xususiyatidan foydalaning

  1. CSS-da hoverda tasvirni o'zgartiring
  2. .karta {
  3. kengligi: 130px;
  4. balandligi: 195px;
  5. fon: url("images/card-back.jpg") takrorlanmaydi;
  6. displey: inline-block;
  7. }

Hoverdan qanday qutulish mumkin?

Hover effektini o'chirish uchun menda ikkita taklif bor:

  1. agar sizning hover effektingiz JavaScript tomonidan ishga tushirilsa, shunchaki $ dan foydalaning. yechish('surish');
  2. agar sizning hover uslubingiz sinf tomonidan ishga tushirilsa, shunchaki $ dan foydalaning. RemoveClass('hoverCssClass');

Tavsiya: