Ndrysho ngjyrën në hover css. Ndryshimi i lehtë i tonit të ngjyrave

Практика

Теперь необходимо задать действие по наведению мышки. Как уже говорилось выше - делаем все при помощи стилей CSS (файл шаблона может называться style.css, css.css, core.css или еще как-то).

Catside a:hover {background: #0078BF; color: #fff;}

Данной строкой мы указали браузеру менять цвет заднего фона при наведении мышки на синий (#0078BF) и сказали что цвет шрифта должен стать белым (#fff). Сама "штука", позволяющая понять браузеру, что это нужно делать по наведению мышки - псевдокласс hover (о нем можно почитать

Здравствуйте уважаемые читатели блога webcodius! Часто получаю вопросы: как сделать так, чтобы картинка на web-страничке менялась при наведении на нее курсора мыши. Такой эффект встречается на многих сайтах и самый простой пример, это когда вы наводите курсор на какую-нибудь кнопку, а она после этого меняет цвет. Иногда для создания подобного эффекта применяется JavaScript, но обычно достаточно одного CSS, особенно после появления CSS третьей версии. Далее в статье я расскажу как менять картинку при наведении курсора мыши с помощью только одного CSS, рассмотрю несколько способов и различные эффекты.

Эффекты изменения элемента веб страницы при наведении курсора мыши часто называют hover-эффектами . Связано это с тем, что при реализации таких эффектов используется , который определяет стиль элемента при наведении на него курсора мыши.

Для начала рассмотрим вариант попроще. Допустим у Вас на страничке вставлена картинка, как приведено ниже:

И допустим вам необходимо менять ее отображение при наведении на нее курсора мыши. При вставке этого изображения к тегу img добвим атрибут class="animate1" , тогда html-код картинки будет выглядеть примерно так:

Для начала можно просто при наведении курсора сделать картинку прозрачной. За прозрачность в CSS отвечает свойство opacity , которое относится к CSS3. В качестве значения используются дробные числа от 0 до 1, где ноль соответствует полной прозрачности, а единица, наоборот, непрозрачности объекта. Для старых версий Internet Explorer придется использовать свойство filter со значением alpha(Opacity=X) , так как они не поддерживают свойство opacity . Вместо X надо будет подставить число от 0 до 100, где 0 означает полная прозрачность, а 100 — полная непрозрачность.

Тогда, чтобы сделать картинку прозрачной при наведении курсора в файл стилей, или между тегами и html-файла нужно добавить следующий css-код:

Në rast se nuk jeni njohur me CSS, më lejoni të shpjegoj se hyrja img.animate1: hover i tregon shfletuesit se për të gjithë elementët duke patur një atribut të klasës të barabartë me animate1 kur rri pezull mbi to me kursorin e miut, aplikojeni stilet e specifikuara... Stilet janë të specifikuara ndërmjet mbajtëse kaçurrelë(dhe). Nëse gjithçka është bërë si duhet, duhet të duket diçka si kjo:

Ju mund të bëni një foto në gjendje origjinale i tejdukshëm dhe e bëjnë atë të errët kur rri pezull. Pastaj shtoni linjat e mëposhtme në skedarin CSS:

img.animate1 (
filtri: alfa (Opacity = 25);
opaciteti: 0,25;
}
img.animate1: rri pezull (

errësirë: 1;
}

Rezultati do të jetë si ky:

Për më shumë efekt, mund të ngadalësoni ndryshimet në transparencën e figurës. Për ta bërë këtë, mund të përdorni veçorinë e tranzicionit CSS, e cila vendos efektin e tranzicionit midis dy gjendjeve të një elementi. Le të shtojmë një sekondë të ngadalësimit për shembull. Atëherë kodi ynë CSS do të bëhet si ky:

img.animate1 (
filtri: alfa (Opacity = 25);
opaciteti: 0,25;
-moz-tranzicion: të gjitha 1-at eaase-in-out; / * efekti i kalimit për Firefox deri në versionin 16.0 * /
-webkit-tranzicion: të gjitha 1-at eaase-in-out; / * efekti i tranzicionit për Chrome 26.0, Safari, Android dhe iOS * /
-o-tranzicion: të gjitha 1-të lehtësi-në-jashtë; / * efekti i tranzicionit për Opera deri në versionin 12.10 * /
tranzicioni: të gjitha 1-të e thjeshta në dalje; / * efekti i tranzicionit për shfletues të tjerë * /
}
img.animate1: rri pezull (
filtri: alfa (Opaciteti = 100);
errësirë: 1;
}

Rezultati:

Nëpërmjet transformojnë vetitë imazhi mund të shkallëzohet, rrotullohet, zhvendoset, anohet. Le të përpiqemi të zmadhojmë figurën. Atëherë kodi css do të jetë si ky:

img.animate1 (


- o-tranzicioni: lehtësia e të gjitha 1-ve;
tranzicioni: lehtësia e të gjitha 1-ve;
}
img.animate1: rri pezull (
- moz-transform: shkalla (1.5); / * efekti i transformimit për Firefox deri në versionin 16.0 * /
- webkit-transform: shkalla (1.5); / * efekt transformimi për Chrome deri në versionin 26.0, Safari, Android dhe iOS * /
- o-transformimi: shkalla (1.5); / * efekti i transformimit për Opera deri në versionin 12.10 * /
- ms-transformimi: shkalla (1.5); / * efekti i transformimit për IE 9.0 * /
transformimi: shkalla (1.5); / * efekt transformimi për shfletues të tjerë * /
}

Dhe rezultati do të jetë si ky:

Mund të shtoni një rrotullim në zmadhimin e figurës. Pastaj stilet css ndrysho pak:

img.animate1 (
- moz-tranzicioni: të gjitha 1s lehtësi;
- uebkit-tranzicioni: të gjitha lehtësitë e 1-ve;
- o-tranzicioni: lehtësia e të gjitha 1-ve;
tranzicioni: lehtësia e të gjitha 1-ve;
}
img.animate1: rri pezull (
- moz-transform: rrotullimi (360 gradë) shkalla (1.5);
- webkit-transform: rrotullimi (360 gradë) shkalla (1.5);
- o-transformimi: shkalla rrotulluese (360 gradë) (1,5);
- ms-transformimi: shkalla rrotulluese (360 gradë) (1,5);
transformimi: rrotullimi (360 gradë) shkalla (1.5);
}

Rezultati:

Më sipër kemi shqyrtuar rastet kur në animacion përfshihet një foto. Konsideroni tjetër mënyra për të zëvendësuar një imazh me një tjetër... Në këtë rast, zakonisht përgatiten dy imazhe me të njëjtën madhësi: një për pamje origjinale, një tjetër për ta zëvendësuar.

Le të themi se kemi dy fotografi, njëra është bardh e zi dhe tjetra është me ngjyra:

Le ta bëjmë atë në mënyrë që kur të rri pezull mbi imazh bardh e zi shfaqet me ngjyra. Për ta bërë këtë, ne do ta bëjmë imazhin origjinal sfondin e elementit div duke përdorur veçorinë e sfondit. Dhe kur rri pezull mbi imazhin me kursorin, ne do të ndryshojmë foto sfondi duke përdorur të njëjtën veçori të pseudo-klasës dhe sfondit të pezullimit. Për të realizuar këtë efekt në faqe html shtoni element div me rrotullim të klasës 1:

Dhe shtoni përshkrimet e mëposhtme të stilit:

div.rotate1 (
sfond: url (img / 2.jpg); / * Rruga drejt skedarit me vizatimin origjinal * /
gjerësia: 480 px; / * Gjerësia e figurës * /
lartësia: 360 px; / * Lartësia e figurës * /
}
div.rotate1: rri pezull (
sfond: url (img / 1.jpg); / * Rruga drejt skedarit me foton e zëvendësuar * /
}

Dhe rezultati është:

Kjo metodë ka një disavantazh i rëndësishëm... Meqenëse imazhi i dytë ngarkohet vetëm kur kursori është vendosur mbi, nëse përdoruesi ka një lidhje të ngadaltë në internet dhe madhësia e skedarit me imazhin është madhësia e madhe, fotografia do të shfaqet me pak pauzë. Prandaj, më poshtë do të shqyrtojmë disa mënyra të tjera për të zëvendësuar imazhet në hover.

Metoda tjetër do të bazohet në kombinimin e dy fotografive në një skedar. Supozoni se duhet të vendosim një buton në faqe, i cili, kur kursori i miut qëndron pezull mbi të, do të ndryshojë pamjen e tij. Për ta bërë këtë, kombinoni dy imazhe në një skedar dhe imazhi që rezulton do të duket diçka si kjo:

Në këtë rast, ndryshimi nga një model në tjetrin do të kryhet duke zhvendosur imazhi i sfondit vertikalisht duke përdorur veçorinë background-position. Meqenëse kur klikoni në butonin, zakonisht ndodh një kalim në një faqe tjetër, atëherë ne do të fusim imazhin në element< a>... Pastaj futni kodin e mëposhtëm në faqen html:

Dhe në skedarin css si kjo:

a.rrotulloj2 (
sfond: url (img / button.png); / * Rruga drejt skedarit me vizatimin origjinal * /
shfaqja: bllok; / * Lidhja si element blloku */
gjerësia: 50 px; / * Gjerësia e figurës në piksel * /
lartësia: 30 px; / * Lartësia e figurës * /
}
a.rotate2: rri pezull (
pozicioni i sfondit: 0 -30 px; / * Sfondi i zhvendosur * /
}

Rezultati:

Dhe mënyra e fundit për sot është kur një imazh vendoset nën një tjetër duke përdorur pozicionin: rregull absolut css. Në këtë rast, ne vendosim dy imazhe në një enë div:

Dhe shtoni stilet css:

Animate 2 (
pozicioni: i afërm;
marzhi: 0 automatik; / * vendosur bllok div qendra e faqes * /
gjerësia: 480 px; /* Gjerësia */
lartësia: 360 px; /* Lartësia */
}
.animate2 img (
pozicioni: absolut; / * pozicionim absolut*/
majtas: 0; / * rreshtoni fotot në të majtë këndi i sipërm div * /
krye: 0; / * rreshtoni imazhet lart majtas këndi div */
}

Pas shtimit rregullat css, fotot do të vendosen njëra poshtë tjetrës. Tani kontrolloni transparencën e fotove me vetitë e tejdukshmërisë në gjendje normale, ne do të tregojmë foton e dytë, dhe kur kursori të qëndrojë pezull mbi të parën. Për ta bërë këtë, në gjendje normale, ne e bëjmë fotografinë me klasën e parë plotësisht transparente, dhe kur kursori rri pezull, anasjelltas: fotografia me klasën e dytë do të jetë plotësisht transparente, dhe me klasën e parë jo transparente:

Animate2 img.first (/ * fotografia e parë është plotësisht transparente * /
errësirë: 0;
filtri: alfa (opaciteti = 0);
}
.animate2: hover img.first (/ * në hover, fotografia e parë bëhet e errët * /
errësirë: 1;
filtri: alfa (opaciteti = 100);
}
/ * dhe e dyta bëhet transparente kur rri pezull * /
errësirë: 0;
filtri: alfa (opaciteti = 0);
}

Rezultati:

Ju mund të arrini një tranzicion të qetë duke shtuar një pronë të tranzicionit CSS në rregullin e fundit:

Animate2: rri pezull img.second, .animate2 img.second: rri pezull (
errësirë: 0;
filtri: alfa (opaciteti = 0);
-moz-tranzicioni: të gjitha 2s lehtësi;
-webkit-tranzicioni: të gjitha 2s lehtësi;
-o-tranzicioni: të gjitha 2s lehtësi;
tranzicioni: të gjitha 2s lehtësi;
}

Dhe rezultati është:

Dhe nëse shtojmë vetinë e transformimit:

Animate2: rri pezull img.second, .animate2 img.second: rri pezull (
errësirë: 0;
filtri: alfa (opaciteti = 0);
-moz-transform: shkalla (0, 1);
-webkit-transform: shkalla (0, 1);
-o-transformoj: shkalla (0, 1);
-ms-transformimi: shkalla (0, 1);
transformimi: shkalla (0, 1); / * zvogëloni gjerësinë e imazhit në 0 * /
}

Rezulton kështu:

Duke kombinuar CSS të ndryshme vetitë mund të arrihen në të ndryshme efektet hover kur ndryshoni fotografi gjatë lëvizjes së miut... Këto dhe shembuj të tjerë i kam vendosur në këtë faqe, ku mund të shkarkoni edhe burimet. Kjo është e gjitha, derisa të takohemi përsëri.

Përdorimi dhe menaxhimi i stileve me duke përdorur JavaScript ju lejon të ndryshoni pamjen e një qelize "në fluturim", kur plotësohen disa kushte, si p.sh. qëndrimi pezull mbi një lidhje ose vetë qelizën.

Le të shqyrtojmë teknikën më të thjeshtë - ngjyra e sfondit të një qelize ndryshon kur kursori i miut rri pezull mbi të.

Lëshimi i miut mbi zonë gjurmohet nga ngjarja onMouseOver dhe miu jashtë zonës gjurmohet nga ngjarja onMouseOut. Meqenëse ngjyra e sfondit ndryshon për të njëjtën qelizë mbi të cilën kalojmë, ndryshimi i stilit bëhet duke përdorur metodën this.style.background.

Shembulli përdor ndryshimin gri sfond në portokalli Kjo metodë nuk funksionon në shfletuesin Netscape 4.x.

Ju gjithashtu mund të bëni një kalim në një dokument tjetër kur klikoni jo në vetë lidhjen, por në një qelizë tabele. Atëherë e gjithë qeliza do të kthehet në një lidhje, dhe jo vetëm teksti brenda saj. Duhet të theksohet se kjo qasje nuk është më e mira, për shkak të jo të dukshmes së saj, vizitorët e faqes në internet janë mësuar me faktin se kur rri pezull mbi një lidhje, kursori i miut kthehet në një dorë. Duke përdorur CSS, mund të anashkaloni pamjen e kursorit të miut, por kjo veçori është e disponueshme vetëm për shfletuesin Internet Explorer.

Për të ndryshuar ngjyrën e një qelize vetëm kur kaloni pezull mbi një lidhje brenda saj, duhet t'i referoheni veçorive të qelizës përmes emrit të saj. Në mënyrë që programi të dijë se cilat veçori të qelizës duhet të ndryshojë, ai përdoret ID e parametrit që identifikon në mënyrë unike artikullin.

Për lehtësi, ndryshimi i ngjyrës së një qelize është projektuar si funksione të veçanta. Për shkak të Shfletuesit e internetit Përdorimi i Explorer, Netscape dhe Opera qasje të ndryshme për të ndryshuar në mënyrë dinamike stilin e një elementi, në funksionet e paraqitura në shembullin 3, ngjyra e sfondit ndryshohet në dy mënyra. Çdo shfletues do të zgjedhë linjën e duhur për vete, dhe pjesa tjetër do të injorohet.