Jak utworzyć link z obrazem kursora w zwykłym CSS

Aktualizacja: 27 lutego 2020 r. / Artykuł: Jerry Low

* Informacje o aktualizacji: ten post został opublikowany po raz pierwszy w październiku 2009 r. Niektóre z wymienionych przeze mnie technik mogą być nieaktualne. Uprzejmie odnoszą się do ten przewodnik po najnowszej technice tworzenia stron internetowych.

Co to jest hover? Definicja cytowana z UWStout.edu:

„Najechanie” to efekt, który pojawia się po umieszczeniu kursora na dowolnym łączu. Link można zakodować, aby odpowiadał na najechanie kursorem, zmieniając kolor, pokazując nową grafikę, a nawet odtwarzając plik dźwiękowy.

Efekt najechania kursorem poprawia użyteczność sieci i pomaga właścicielom witryn kierować ruchem w sieci. Jeśli chcesz, aby użytkownicy sieci zwrócili szczególną uwagę na specjalny link, dobrym sposobem jest utworzenie łącza z atrakcyjnym efektem najechania kursorem. Taki prosty efekt najechania kursorem (proste podkreślenie i zmiana koloru tekstu) wskazuje, że ten tekst można „kliknąć” i poprawia interakcje w sieci. Jednak zmiana koloru i stylów tekstu (podkreślenie / nadkreślenie / pogrubienie) to podstawa, a za pomocą najechania kursorem można zrobić o wiele więcej.

W tym artykule pokażę, jak można stworzyć dobrze wyglądające linki z efektem najechania.

Przykład 1: Link z przyciskiem Hover

Najpierw spójrz na działający przykład (najedź myszką na link, żeby zobaczyć jak to działa - zmiana ikony z boku).

Przykład 1 - Link z obrazem przycisku najechania

Jest to pełna wersja tego, co zostanie zbudowane w tym przykładzie.

Jak tworzymy go w prostym CSS?

Obraz przycisku

Krok 1, jak widać, potrzebujemy ikon strzałek w dwóch różnych wersjach. W naszym przykładzie użyłem czerwonego (#CC3300) jako domyślnego przycisku łącza; i szary (#333333) dla efektu zawisu. Taki przycisk można łatwo wykonać za pomocą dowolnego oprogramowania do edycji obrazów.

Teraz mamy przycisk koloru czerwonego (powiedzmy, b1.png) i kolor rey (przycisk powiedz, b2.png). Scal je w jeden plik obrazu za pomocą b1.png na górze b2.png. To będzie nasz ostateczny obraz linku. Nazwij go (powiedzmy x.png) i prześlij żądaną lokalizację (w moim przypadku umieściłem ją w folderze szablonu WP).

W celach informacyjnych:

B1.png , b2.png i x.png

Kod CSS

Następnie, w kodzie CSS. Zasadniczo chcemy uzyskać wcięcie tekstu linku nieco w prawo, aby zrobić miejsce dla przycisku; i jednocześnie wyświetlać inny obraz, gdy łącze znajduje się w stanie zawisu. Są to bardzo podstawowe rzeczy, z tym, że potrzebujemy trochę skrętu na pozycji tła. Sztuką jest pokazanie górnej części obrazu (czerwony przycisk) oryginalnego linku; i po najechaniu myszką przesunąć obraz tła za pomocą marginesu -11px (może być inny na Twojej stronie), aby wyświetlić szary przycisk.

.xa {color: #cc3300; padding-left: 14px; font-weight: bold; background-image: url (images / x.png); położenie tła: 0 2px; background-repeat: no-repeat; }
.xa: hover {color: #333333; padding-left: 14px; font-weight: bold; background-image: url (images / x.png); położenie tła: 0 -11px; background-repeat: no-repeat; }

Realizacja

Aby pokazać ten efekt, po prostu wstaw klasę x do wyznaczonego obszaru. Oto przykład, jak możesz to zrobić.

Strona główna

Przykład 2: Link na tle w dymku

Dzięki tej samej koncepcji istnieją nieskończone sposoby, dzięki którym linki mogą wyglądać świetnie. Oto kolejny przykład tego, co możemy zrobić z efektami najechania za pomocą nieco innej metody. Ponownie spójrz na gotową wersję.

Przykład 2 - Link w tle po najechaniu kursorem

W tym przykładzie zrobię to, aby utworzyć hiperlink podobny do przycisku, w którym tło zmieni się, gdy użytkownik umieści nad nim myszkę.

Jak tworzymy go w prostym CSS?

Obrazy tła

Najpierw utwórz dwa obrazy zaokrąglonego prostokąta. Dla celów demonstracyjnych nie połączymy tych dwóch obrazów w tym przykładzie. Nazwiemy czerwony prostokąt (#CC3300) jako b1.png; i prostokąt bordowy (#9F2800) jako b2.png.

Kod CSS

Dalej, oto kody dla twojego arkusza stylów (w tym drugim przykładzie nazywamy klasę „y”).

ay {width: 280px; wysokość: 42px; kolor: #000000; dopełnienie: 10px; dekoracja tekstowa: brak; Blok wyświetlacza; font-weight: bold; background-image: url (images / b1.png); background-repeat: no-repeat; }
ay: hover {width: 280px; wysokość: 42px; kolor: #FFFFFF; dopełnienie: 10px; font-weight: bold; dekoracja tekstowa: brak; Blok wyświetlacza; background-image: url (images / b2.png); background-repeat: no-repeat; }

Realizacja

Aby wyświetlić link, po prostu wstaw klasę (y) do znacznika w kodzie źródłowym. Przykład:

Strona główna

Zamykając

Mam nadzieję, że ten artykuł przyniósł ci cenne informacje i zainspirował niektórych z was do kreatywnego wykorzystania CSS. Jeśli są jakieś inne punkty, które moim zdaniem powinienem dodać w tym przewodniku, nie krępuj się zostawić swoje pomysły w sekcji komentarzy.

O Jerry Low

Założyciel WebHostingSecretRevealed.net (WHSR) - przegląd hostingu zaufany i używany przez użytkowników 100,000. Więcej niż doświadczenie 15 w hostingu, marketingu afiliacyjnym i SEO. Współpracuje z ProBlogger.net, Business.com, SocialMediaToday.com i innymi.