Witajcie drodzy czytelnicy bloga webcodius! Często dostaję pytania: jak zmienić obrazek na stronie internetowej, gdy najedziesz na niego kursorem myszy. Ten efekt można znaleźć na wielu stronach, a najprostszym przykładem jest najechanie kursorem na przycisk, a następnie zmiana koloru. Czasami do stworzenia tego efektu używany jest JavaScript, ale zwykle sam CSS wystarczy, zwłaszcza od czasu wprowadzenia trzeciej wersji CSS. W dalszej części artykułu będę jak zmienić obraz po najechaniu myszą z jednym CSS, przyjrzę się kilku sposobom i różnym efektom.

Skutki zmiany elementu strony internetowej po najechaniu myszą są często określane jako efekty najechania. Wynika to z faktu, że przy implementacji takich efektów jest on używany, co określa styl elementu po najechaniu na niego kursorem myszy.

Na początek rozważmy prostszą opcję. Załóżmy, że na stronie wstawiono obraz, jak pokazano poniżej:

I powiedzmy, że musisz zmienić jego wyświetlanie, gdy najedziesz na niego kursorem myszy. Podczas wklejania tego obrazu do tag img dodaj atrybut class="animate1" , wtedy kod html obrazu będzie wyglądał mniej więcej tak:

Na początek możesz po prostu najechać kursorem, aby obraz był przezroczysty. Przezroczystość w CSS jest obsługiwana przez właściwość opacity, która jest właściwością CSS3. Jako wartość stosuje się liczby ułamkowe od 0 do 1, gdzie zero odpowiada pełnej przezroczystości, a jeden, przeciwnie, nieprzezroczystości obiektu. Dla starszych wersji Internet Explorer będziesz musiał użyć właściwości filtra z alpha(Opacity=X), ponieważ nie obsługują one właściwości opacity. Zamiast X musisz zastąpić liczbę od 0 do 100, gdzie 0 oznacza pełną przezroczystość, a 100 oznacza pełne krycie.

Następnie, aby obraz był przezroczysty po najechaniu kursorem na plik stylu lub między tagami I plik html, dodaj następujący kod css:

Jeśli nie znasz CSS, wyjaśnię, że wpis img.animate1:hover informuje przeglądarkę, że dla wszystkich elementów , z atrybutem class równym animate1, po najechaniu na nie kursorem myszy, zastosuj określone style. A style są określone w nawiasach klamrowych ( i ). Jeśli wszystko jest zrobione poprawnie, powinno to wyglądać mniej więcej tak:

Możesz zrobić zdjęcie w pierwotnego stanu półprzezroczysty, a gdy najedziesz kursorem, spraw, by był nieprzezroczysty. Następnie musisz dodać następujące wiersze do pliku CSS:

obraz.animacja1(
filtr: alfa (Krycie=25);
krycie: 0,25
}
img.animate1:najedź (

krycie: 1
}

Wynik będzie taki:

Aby uzyskać większy efekt, możesz spowolnić zmiany przezroczystości obrazu. Aby to zrobić, możesz użyć właściwości przejścia CSS, która ustawia efekt przejścia między dwoma stanami elementu. Na przykład dodajmy jedną sekundę spowolnienia. Wtedy nasz kod CSS będzie wyglądał tak:

obraz.animacja1(
filtr: alfa (Krycie=25);
krycie: 0,25
-moz-transition: wszystkie jedynki zwalniają; /* efekt przejścia dla Firefoksa przed wersją 16.0 */
-przejście na webkit: wszystkie jedynki złagodzone; /* efekt przejścia dla Chrome do wersji 26.0, Safari, Android i iOS */
-o-przejście: wszystkie jedynki luzują się; /* efekt przejścia dla Opery przed wersją 12.10 */
przejście: wszystkie jedynki luzy na zewnątrz; /* efekt przejścia dla innych przeglądarek */
}
img.animate1:najedź (
filtr: alfa (Krycie=100);
krycie: 1
}

Wynik:

Korzystając z właściwości transform, obraz można skalować, obracać, przesuwać, pochylać. Spróbujmy powiększyć obraz. Wtedy kod css będzie wyglądał tak:

obraz.animacja1(


- O-transition: wszystkie jedynki z łatwością;
przejście: łatwość wszystkich jedynek;
}
img.animate1:najedź(
- moz-transform: skala (1,5); /* efekt transformacji dla Firefoksa przed wersją 16.0 */
- webkit-transform: skala (1.5); /* efekt transformacji dla Chrome do wersji 26.0, Safari, Android i iOS */
- o-transformacja: skala (1,5); /* efekt transformacji dla Opery przed wersją 12.10 */
- przekształcenie ms: skala (1,5); /* efekt transformacji dla IE 9.0 */
transformacja:skala(1.5); /* efekt transformacji dla innych przeglądarek */
}

A wynik będzie taki:

Obrót można dodać, aby powiększyć obraz. Następnie style css nieco się zmienią:

obraz.animacja1(
przejście moz: łatwość wszystkich 1;
przejście na webkit: łatwość wszystkich 1s;
- O-transition: wszystkie jedynki z łatwością;
przejście: łatwość wszystkich jedynek;
}
img.animate1:najedź(
- moz-transform: skala obrotu (360 stopni) (1,5);
- webkit-transform: skala obrotu (360 stopni) (1,5);
- o-transform: obrót (360 stopni) skala (1,5);
- ms-transform: skala obrotu (360 stopni) (1,5);
transformacja: obrót (360 stopni) skala (1,5);
}

Wynik:

Powyżej rozważaliśmy przypadki, w których w animację zaangażowany jest jeden obraz. Następnie rozważ jak zastąpić jeden obraz innym. W takim przypadku zwykle przygotowywane są dwa obrazy tego samego rozmiaru: jeden do oryginalnego widoku, drugi do jego wymiany.

Załóżmy, że mamy dwa obrazki, jedno czarno-białe, a drugie kolorowe:

Zróbmy to tak, że po najechaniu na czarno-biały obraz wyświetlany jest obraz kolorowy. Aby to zrobić, utworzymy oryginalny obraz jako tło elementu div za pomocą właściwości background. A kiedy najedziesz na obraz kursora, zmienimy się obraz w tle przy użyciu tej samej pseudoklasy hover i właściwości tła. Aby wprowadzić ten efekt na strona html dodaj element div z klasą rotate1:

I dodaj następujące opisy stylów:

przek.obrót1(
tło: url (img/2.jpg); /* Ścieżka do pliku z oryginalnym obrazem */
szerokość: 480px /* Szerokość obrazu */
wysokość: 360px; /* Wysokość obrazu */
}
div.rotate1:najedź (
tło: url (img/1.jpg); /* Ścieżka do pliku z podmienionym obrazem */
}

A wynik:

Ta metoda ma jedną istotną wadę. Ponieważ drugie zdjęcie jest ładowane tylko po najechaniu kursorem, jeśli użytkownik ma wolne połączenie z Internetem, a rozmiar pliku ze zdjęciem jest duży rozmiar, obraz zostanie wyświetlony z pewną przerwą. Dlatego poniżej rozważymy kilka innych sposobów zastępowania obrazów po najechaniu kursorem myszy.

Kolejna metoda polegać będzie na połączeniu dwóch zdjęć w jeden plik. Powiedzmy, że musimy umieścić na stronie przycisk, który po najechaniu na nią kursorem myszy zmieni swój wygląd. Aby to zrobić, łączymy dwa obrazy w jeden plik, a wynikowy obraz będzie wyglądał mniej więcej tak:

W takim przypadku zmiana z jednego obrazu na inny będzie odbywać się poprzez przesunięcie obrazu tła w pionie za pomocą właściwości background-position. Ponieważ po kliknięciu przycisku zwykle przechodzisz na inną stronę, wstawimy obraz do elementu< a>. Następnie wklej następujący kod na stronę html:

A w takim pliku css:

a.obróć2(
tło: url (img/button.png); /* Ścieżka do pliku z oryginalnym obrazem */
Blok wyświetlacza; /* Link jako element blokowy */
szerokość: 50px /* Szerokość obrazu w pikselach */
wysokość: 30px; /* Wysokość obrazu */
}
a.obróć2:najedź(
pozycja w tle: 0-30px; /* Przesunięcie tła */
}

Wynik:

A ostatni sposób na dziś to umieszczenie jednego obrazu pod drugim za pomocą css stanowisko: bezwzględne zasady. W tym przypadku umieszczamy dwa obrazy w kontenerze div:

I dodaj style CSS:

Animuj2(
pozycja:względna;
margin:0 auto;/* ustaw blok div na środku strony*/
szerokość:480px; /* Szerokość */
wysokość: 360px; /* Wysokość */
}
.animate2 obraz(
pozycja:bezwzględna; /* pozycjonowanie bezwzględne */
po lewej: 0; /* wyrównaj obrazy do lewego górnego rogu elementu div */
góra: 0; /* wyrównaj obrazy do lewego górnego rogu elementu div */
}

Po dodaniu zasady css, zdjęcia zostaną umieszczone jeden pod drugim. Teraz, kontrolując przezroczystość obrazów za pomocą właściwości opacity, pokażemy drugi obraz w stanie normalnym, a pierwszy po najechaniu kursorem. W tym celu w stanie normalnym sprawiamy, że obrazek z pierwszą klasą będzie całkowicie przezroczysty, a po najechaniu kursorem jest odwrotnie: obrazek z klasą drugą będzie całkowicie przezroczysty, a z klasą pierwszą będzie nie przeźroczysty:

Animate2 img.first ( /* pierwszy obraz jest w pełni przezroczysty */
krycie:0;
filtr:alfa (nieprzezroczystość=0);
}
.animate2:hover img.first ( /* pierwszy obraz staje się nieprzezroczysty po najechaniu myszą */
nieprzezroczystość:1;
filtr:alfa (nieprzezroczystość=100);
}
/* a druga staje się przeźroczysta po najechaniu */
krycie:0;
filtr:alfa (nieprzezroczystość=0);
}

Wynik:

Możesz uzyskać płynne przejście, dodając właściwość przejścia CSS do ostatniej reguły:

Animate2: najedź drugi obraz, .animate2 drugi obraz: najedź (
krycie:0;
filtr:alfa (nieprzezroczystość=0);
-moz-przejście: łatwość wszystkich dwójek;
- przejście na webkit: łatwość wszystkich 2;
-o-przejście: łatwość wszystkich dwójek;
przejście: łatwość wszystkich dwójek;
}

A wynik:

A jeśli dodamy właściwość transform:

Animate2: najedź drugi obraz, .animate2 drugi obraz: najedź (
krycie:0;
filtr:alfa (nieprzezroczystość=0);
-moz-transform:skala(0, 1);
-webkit-transform:scale(0, 1);
-o-transform:skala(0, 1);
-ms-transform:skala (0, 1);
transformacja:skala(0, 1); /* zmniejsz szerokość obrazu do 0 */
}

Wyjdzie tak:

Łącząc różne właściwości CSS, możesz osiągnąć różne efekty najechania kursorem podczas zmiany obrazów podczas najeżdżania myszą. Te i inne przykłady umieściłem na tej stronie, skąd można również pobrać kod źródłowy. To wszystko, dopóki nie spotkamy się ponownie.

Rozwiązanie
Aby uczynić tabelę bardziej czytelną, możesz zmienić kolor wiersza po najechaniu na nią wskaźnikiem myszy - to podświetli zawartość. Ten efekt pokazano w Ryż. 5.10.

Ryż. 5.10

Implementacja jest dość prosta, wystarczy dodać następującą regułę do arkusza stylów:

Dyskusja
Taki dokument będzie wyświetlany poprawnie we wszystkich nowoczesne przeglądarki, w tym Internet Explorer 7, ale z wyjątkiem Internet Explorera 6. Jeśli jednak dane w tabeli są przedstawione logicznie i wszystko
jasne i bez podświetlenia tła, wtedy ten efekt można uznać za miły dodatek, ale nie obowiązkowy - bez którego korzystanie z serwisu byłoby niemożliwe.

Jeśli z jakiegoś powodu koniecznie musisz wdrożyć ta funkcja dla użytkowników przeglądarki Internet Explorer 6 można dodać prosty skrypt JavaScript. Aby zmienić kolor tła wiersza tabeli, gdy najedziesz na niego kursorem w Internet Explorerze 6, musisz ustawić niezbędne właściwości dla klasy CSS (w tym przykładzie nazwę to „hilite”).

Po tabeli dodaj następujący kod JavaScript do strony:

Ten skrypt wyszukuje wszystkie tagi w dokumencie i nadanie każdemu z nich funkcji obsługi zdarzenia mouseover i mouseout.
Przypisują hilite klasę CSS do wierszy, gdy wskaźnik myszy znajduje się nad nią, i usuwają ją, gdy jest przenoszona do innego obszaru. Jak widać na Ryż. 5.11, ta kombinacja CSS i JavaScript daje pożądany wynik.

Ten skrypt JavaScript dynamicznie ustawia klasę CSS dla tagu. W tym przypadku do tagu dodajemy klasę hilite na zdarzeniu mouseover, dla którego używana jest właściwość onmouseover:

Ryż. 5.11

Po wystąpieniu zdarzenia mouseout usuwamy klasę:

Zmieniając nazwę klasy elementu w odpowiedzi na działania użytkownika za pomocą JavaScript, można osiągnąć wiele atrakcyjnych i dyskretnych efektów. Ta technika może być wykorzystana na przykład do podświetlenia określonego obszaru poprzez zmianę nazwy klasy odpowiedniego elementu div w zdarzeniu mouseover.

Notatka
Dyskretny JavaScript. Być może zauważyłeś, że kod JavaScript nie został dodany do samej tabeli; cały skrypt został umieszczony tylko w elemencie script. Ta technika nazywa się dyskretnym JavaScript; jego celem jest oddzielenie dokumentu i skryptów, podobnie jak rozdzielamy znaczniki i kaskadowe arkusze stylów.

Skrypt JavaScript musi zostać uruchomiony po załadowaniu tabeli, ponieważ wcześniej nie istnieje sam obiekt, na którym skrypt miałby zostać wykonany. Alternatywnie możesz napisać funkcję, która zostanie wykonana po zakończeniu ładowania strony; w tym przypadku kod JavaScript może być przechowywany w oddzielny plik, określając link do niego w kodzie strony. Ponadto, aby upewnić się, że skrypt zostanie załadowany tylko wtedy, gdy strona zostanie otwarta w przeglądarka internetowa Explorer 6, możesz używać komentarzy warunkowych.

Porozmawiamy o tym więcej w sekcji „Definiowanie różnych stylów dla Internet Explorera 6 i 7” w rozdziale 7.

Podobnie jak w poprzednim przykładzie, w tym przypadku korzystanie z różnych bibliotek, takich jak jQuery, może się przydać, gdy obsługa niektórych właściwości w starszych przeglądarkach nie jest dostępna.

W tym artykule przykład pokazuje, jak zmienić kolor na dowolnym elemencie witryny, jeśli został nad nim najechany kursor myszy.

Ta „rzecz” jest wykonywana za pomocą style css, tj. będziesz musiał dodać kilka linii tekstu do pliku stylu szablonu, a także pokazać swoje umiejętności projektowania. Pokażę ci co dodać.

Zaktualizowano 17.01.2019

Uwaga! Udostępniłem nowy motyw Romb dla twoich artykułów i blogów. Najszybszy na Google PageSpeed ​​i maksymalna optymalizacja pod SEO.

Podajmy tylko przykład dla jasności, abyś zrozumiał, o czym mówimy. Najedź myszą na pozycje menu:

Po najechaniu myszą na dowolne pole na liście zmienia się tło linii, a także kolor tekstu/linku w tytule nagłówka strony.

Tak wygląda kod blokowy:

XHTML

W moim przykładzie widzimy, że efekt działa na zwykłym łączu. Zamiast tego może być pojemnikiem