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

Artykuł napisany przez:
  • Projektowanie stron internetowych
  • Zaktualizowano: Aug 02, 2013

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

„Najedź” to efekt, który pojawia się, gdy umieścisz kursor na dowolnym łączu. Łącze można zakodować, aby odpowiedzieć na dymek, zmieniając kolor, wyświetlając nową grafikę, a nawet odtwarzając plik dźwiękowy.

Efekt zawieszania poprawia użyteczność stron internetowych i pomaga właścicielom witryn w kierowaniu ich traffickami w sieci. Jeśli chcesz, aby Twoi internauci zwracali szczególną uwagę na specjalny odsyłacz, dobrym sposobem jest utworzenie linku z atrakcyjnym efektem najechania. Prosty efekt najechania tak (proste podkreślenie i zmiana koloru tekstu) wskazuje, że tekst jest „klikalny” i poprawia interakcje internetowe. Jednak zmiana koloru tekstu i stylów (podkreślenie / nadpisanie / pogrubienie) jest bardzo podstawowa, a przy najechaniu 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 (umieść mysz nad linkiem, aby zobaczyć, jak to działa - zmiana ikony z boku).

Przykład 1 - Łącze z obrazem przycisku Hover

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ć.

<p class = 'x'> <a href="http://www.webhostingsecretrevealed.com"> Strona główna </a> </ p>

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 - Łącze na tle zawisu

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 twojego arkusza stylów (nazywamy klasę „y” w tym drugim przykładzie).

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ć łącze, wystarczy wstawić klasę (y) do znacznika <a href> w kodzie źródłowym. Przykład:

<a href="http://www.webhostingsecretrevealed.com" class="y"> Strona główna </a>

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.

Więcej samouczków CSS

Jeśli podoba Ci się ten post, pamiętaj, aby również sprawdzić Jak dobrze wykorzystać animacje CSS 3, Musisz przeczytać samouczki CSS 3 2012, jak również Ulepsz swoją stronę dzięki tym technikom CSS 3.

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.