Schimbați culoarea la hover CSS. Schimbare ușoară a tonului de culoare

Практика

Теперь необходимо задать действие по наведению мышки. Как уже говорилось выше - делаем все при помощи стилей 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 cazul în care nu sunteți familiarizat cu CSS, permiteți-mi să vă explic că img.animate1: intrarea hover spune browserului că pentru toate elementele având un atribut de clasă egal cu animate1 când treceți cu mouse-ul peste ele cu cursorul mouse-ului, aplicați stiluri specificate... Stilurile sunt specificate între acolade( și ). Dacă totul a fost făcut corect, ar trebui să arate cam așa:

Puteți face o poză în starea originară translucid și faceți-l opac la hover. Apoi adăugați următoarele linii în fișierul CSS:

img.animate1 (
filtru: alfa (Opacitate = 25);
opacitate: 0,25;
}
img.animate1: hover (

opacitate: 1;
}

Rezultatul va fi astfel:

Pentru mai mult efect, puteți încetini schimbările în transparența imaginii. Pentru a face acest lucru, puteți utiliza proprietatea de tranziție CSS, care stabilește efectul de tranziție între cele două stări ale unui element. Să adăugăm, de exemplu, o secundă de decelerare. Atunci codul nostru CSS va deveni astfel:

img.animate1 (
filtru: alfa (Opacitate = 25);
opacitate: 0,25;
-moz-tranziție: toate cele 1 ease-in-out; / * efect de tranziție pentru Firefox până la versiunea 16.0 * /
-webkit-tranziție: toate cele 1 ease-in-out; / * efect de tranziție pentru Chrome 26.0, Safari, Android și iOS * /
-o-tranziție: toate cele 1 ease-in-out; / * efect de tranziție pentru Opera până la versiunea 12.10 * /
tranziție: toate cele 1 ease-in-out; / * efect de tranziție pentru alte browsere * /
}
img.animate1: hover (
filtru: alfa (Opacitate = 100);
opacitate: 1;
}

Rezultat:

Prin intermediul proprietăți de transformare imaginea poate fi scalată, rotită, deplasată, înclinată. Să încercăm să mărim imaginea. Atunci codul css va fi astfel:

img.animate1 (


- o-tranziție: toate 1-urile ușurință;
tranziție: toate 1s ușurință;
}
img.animate1: hover (
- moz-transform: scara (1,5); / * efect de transformare pentru Firefox până la versiunea 16.0 * /
- webkit-transform: scară (1,5); / * efect de transformare pentru Chrome până la versiunea 26.0, Safari, Android și iOS * /
- o-transforma: scara (1,5); / * efect de transformare pentru Opera până la versiunea 12.10 * /
- ms-transform: scară (1,5); / * efect de transformare pentru IE 9.0 * /
transforma: scară (1,5); / * efect de transformare pentru alte browsere * /
}

Și rezultatul va fi așa:

Puteți adăuga o rotație la mărirea imaginii. Atunci stiluri css schimba putin:

img.animate1 (
- tranziție moz: toate 1s ease;
- webkit-tranziție: ușurința tuturor celor 1;
- o-tranziție: toate 1-urile ușurință;
tranziție: toate 1s ușurință;
}
img.animate1: hover (
- moz-transform: rotire (360deg) scară (1,5);
- webkit-transform: rotire (360deg) scară (1,5);
- o-transformă: rotire (360deg) scară (1,5);
- ms-transform: rotire (360deg) scară (1,5);
transformare: rotire (360deg) scară (1,5);
}

Rezultat:

Mai sus, am luat în considerare cazurile în care o imagine este implicată în animație. Luați în considerare următoarea modalități de a înlocui o imagine cu alta... În acest caz, de obicei sunt pregătite două imagini de aceeași dimensiune: una pentru vedere originală, altul să-l înlocuiască.

Să presupunem că avem două imagini, una alb-negru și cealaltă color:

Să facem astfel încât atunci când treci cu mouse-ul deasupra imagine alb-negru afisat color. Pentru a face acest lucru, vom face din imaginea originală fundalul elementului div folosind proprietatea de fundal. Și când treceți cu mouse-ul peste imagine cu cursorul, ne vom schimba imagine de fundal folosind aceeași pseudo-clasă și proprietate de fundal. Pentru a realiza acest efect asupra pagina html adăuga element div cu clasa rotate1:

Și adăugați următoarele descrieri de stil:

div.rotate1 (
fundal: url (img / 2.jpg); / * Calea către fișierul cu desenul original * /
latime: 480px; / * Lățimea imaginii * /
înălțime: 360px; / * Înălțimea imaginii * /
}
div.rotate1: hover (
fundal: url (img / 1.jpg); / * Calea către fișierul cu imaginea înlocuită * /
}

Iar rezultatul este:

Această metodă are una dezavantaj semnificativ... Deoarece a doua imagine este încărcată numai atunci când cursorul este plasat peste, dacă utilizatorul are o conexiune lentă la Internet și dimensiunea fișierului cu imaginea este marime mare, imaginea va fi afișată cu o pauză. Prin urmare, mai jos vom lua în considerare câteva modalități de înlocuire a imaginilor la hover.

Următoarea metodă se va baza pe combinarea a două imagini într-un singur fișier. Să presupunem că trebuie să plasăm un buton pe pagină, care, atunci când cursorul mouse-ului trece peste el, și-ar schimba vizualizarea. Pentru a face acest lucru, combinați două imagini într-un singur fișier și imaginea rezultată va arăta cam așa:

În acest caz, schimbarea de la un model la altul se va efectua prin schimbare imagine de fundal vertical folosind proprietatea background-position. Deoarece atunci când faceți clic pe buton, de obicei are loc o tranziție către o altă pagină, atunci vom insera imaginea în element< a>... Apoi introduceți următorul cod în pagina html:

Și în fișierul css așa:

a.rotate2 (
fundal: url (img / button.png); / * Calea către fișierul cu desenul original * /
afisare: bloc; / * Link ca element bloc */
latime: 50px; / * Lățimea imaginii în pixeli * /
înălțime: 30px; / * Înălțimea imaginii * /
}
a.rotate2: hover (
fundal-poziție: 0 -30px; / * Offset fundal * /
}

Rezultat:

Și ultima modalitate pentru astăzi este atunci când o imagine este plasată sub alta folosind poziția: regula css absolută. În acest caz, plasăm două imagini într-un container div:

Și adăugați stiluri CSS:

Animate2 (
poziție: relativă;
marjă: 0 automat; / * set bloc div centrul paginii * /
latime: 480px; /* Latime */
înălțime: 360px; /* Înălțime */
}
.animate2 img (
poziție: absolută; / * poziționare absolută*/
stânga: 0; / * aliniază imaginile la stânga colțul de sus div * /
sus: 0; / * aliniază imaginile în stânga sus colț div */
}

După adăugare regulile css, pozele vor fi plasate una sub alta. Acum controlând transparența imaginilor cu proprietăți de opacitateîn stare normală, vom afișa cea de-a doua imagine și când cursorul trece peste prima. Pentru a face acest lucru, în starea normală, facem imaginea cu prima clasă complet transparentă, iar atunci când cursorul se deplasează, invers: imaginea cu clasa a doua va fi complet transparentă, iar cu prima clasă nu este transparentă:

Animate2 img.first (/ * prima imagine este complet transparentă * /
opacitate: 0;
filtru: alfa (opacitate = 0);
}
.animate2: hover img.first (/ * la hover, prima imagine devine opaca * /
opacitate: 1;
filtru: alfa (opacitate = 100);
}
/ * iar al doilea devine transparent la hover * /
opacitate: 0;
filtru: alfa (opacitate = 0);
}

Rezultat:

Puteți obține o tranziție lină adăugând o proprietate de tranziție CSS la ultima regulă:

Animate2: hover img.second, .animate2 img.second: hover (
opacitate: 0;
filtru: alfa (opacitate = 0);
-moz-tranziție: toate cele 2 ușurință;
-webkit-tranziție: ușurința tuturor celor 2;
-o-tranziție: toate cele 2 ușurință;
tranziție: toate cele 2 ușurință;
}

Iar rezultatul este:

Și dacă adăugăm proprietatea transform:

Animate2: hover img.second, .animate2 img.second: hover (
opacitate: 0;
filtru: alfa (opacitate = 0);
-moz-transform: scara (0, 1);
-webkit-transform: scară (0, 1);
-o-transforma: scara (0, 1);
-ms-transform: scară (0, 1);
transforma: scară (0, 1); / * reduce lățimea imaginii la 0 * /
}

Se dovedește așa:

Prin combinare diverse CSS proprietățile pot fi atinse în diferite efecte de hover când schimbați imaginile în timpul trecerii mouse-ului... Am plasat acestea și alte exemple pe această pagină, de unde puteți descărca și sursele. Atât, până ne întâlnim din nou.

Utilizarea și gestionarea stilurilor cu folosind JavaScript vă permite să schimbați aspectul unei celule „din zbor”, atunci când sunt îndeplinite anumite condiții, cum ar fi trecerea cu mouse-ul peste o legătură sau pe celula în sine.

Să luăm în considerare cea mai simplă tehnică - culoarea de fundal a unei celule se schimbă atunci când cursorul mouse-ului trece peste ea.

Plasarea mouse-ului peste zonă este urmărită de evenimentul onMouseOver, iar mouse-ul care iese din zonă este urmărit de evenimentul onMouseOut. Deoarece culoarea de fundal se schimbă pentru aceeași celulă peste care trecem cursorul, schimbarea stilului se face folosind metoda this.style.background.

Exemplul folosește schimbarea gri fundal în portocaliu Această metodă nu funcționează în browserul Netscape 4.x.

De asemenea, puteți face o tranziție către un alt document când faceți clic nu pe linkul în sine, ci pe o celulă de tabel. Apoi întreaga celulă se va transforma într-un singur link, și nu doar textul din interiorul acesteia. Trebuie remarcat faptul că această abordare nu este cea mai bună, datorită lipsei ei de evidentă, vizitatorii site-ului sunt obișnuiți cu faptul că atunci când trec cu mouse-ul peste un link, cursorul mouse-ului se transformă într-o mână. Folosind CSS, puteți suprascrie aspectul cursorului mouse-ului, dar această caracteristică este disponibilă numai pentru browser Internet Explorer.

Pentru a schimba culoarea unei celule numai atunci când treceți cu mouse-ul peste un link din interiorul acesteia, ar trebui să vă referiți la proprietățile celulei prin numele acesteia. Pentru ca programul să știe ce proprietăți celulei să modifice, acesta este utilizat ID-ul parametrului care identifică în mod unic articolul.

Pentru comoditate, schimbarea culorii unei celule este concepută ca funcții separate. Din cauza browsere de internet Utilizarea Explorer, Netscape și Opera abordări diferite pentru a schimba dinamic stilul unui element, în funcțiile prezentate în exemplul 3, culoarea de fundal este schimbată în două moduri. Fiecare browser va alege linia potrivită pentru sine, iar restul va fi ignorat.