Jak zrobić podświetlenie strony z linku po jego najechaniu?

Witaj! Jeśli zastanawiasz się, jak podświetlić fragment strony internetowej lub zmienić jej wygląd po najechaniu kursorem na link, to jesteś we właściwym miejscu. W tym artykule pokażę Ci, jak prosto i efektownie zrobić takie podświetlenie za pomocą kodu CSS i, jeśli potrzeba, odrobinę JavaScriptu. Gotowy? Zaczynajmy!

Dlaczego warto podświetlać linki?

Podświetlanie linków to nie tylko kwestia estetyki. To także poprawa użyteczności strony. Użytkownik od razu wie, że coś jest klikalne, i może łatwo odnaleźć interaktywne elementy. Ponadto odpowiednio zaprojektowane efekty wizualne mogą nadać stronie charakteru i wyróżnić ją wśród innych.

Podświetlanie linków na stronie może obejmować różne efekty, takie jak:

Zmiana koloru tekstu.
Podkreślenie lub usunięcie podkreślenia.
Animacje, np. płynne przejścia.
Podświetlenie tła wokół linku.

Wszystko zależy od tego, co chcesz osiągnąć. A teraz przejdźmy do konkretów!

Jak działa CSS przy podświetlaniu?

Za większość efektów wizualnych na stronach odpowiada CSS (Cascading Style Sheets). Aby podświetlić link, możesz wykorzystać specjalne pseudo-klasy, takie jak:

:hover – stosowana, gdy użytkownik najeżdża kursorem na element.
:focus – stosowana, gdy element jest w stanie aktywności (np. kliknięty lub wybrany za pomocą klawiatury).

Przykład kodu CSS:

a {
  color: black; /* Kolor podstawowy linku */
  text-decoration: none; /* Usuwamy podkreślenie */
  transition: all 0.3s ease; /* Płynna animacja */
}

a:hover {
  color: red; /* Zmiana koloru tekstu na czerwony */
  background-color: yellow; /* Dodanie żółtego tła */
}

Co się tu dzieje?

Standardowy styl linku (a):
- Kolor czarny.
- Brak podkreślenia.
- Płynna animacja, która trwa 0.3 sekundy.
Styl po najechaniu (a:hover):
- Kolor zmienia się na czerwony.
- Tło zmienia się na żółte.

Efekt jest natychmiastowy i świetnie sprawdza się w większości przypadków.

Podświetlenie całego bloku wokół linku

Jeśli chcesz, aby podświetlenie objęło cały obszar wokół linku, możesz zastosować padding (odstępy wewnętrzne). Dzięki temu efekt będzie bardziej wyrazisty.

a {
  display: inline-block; /* Zamieniamy link w element blokowy */
  padding: 10px 20px; /* Dodajemy odstępy wokół tekstu */
  color: white; /* Kolor tekstu */
  background-color: blue; /* Tło linku */
  text-decoration: none; /* Usuwamy podkreślenie */
  transition: all 0.3s ease;
}

a:hover {
  background-color: darkblue; /* Zmiana tła na ciemniejszy odcień */
  color: yellow; /* Zmiana koloru tekstu */
}

Teraz link będzie wyglądał jak przycisk, który zmienia kolor tła po najechaniu kursorem. Fajnie, prawda?

Dodanie animacji do podświetlenia

Chcesz dodać trochę „wow”? Możesz wykorzystać animacje CSS, np. płynne rozszerzanie tła.

Kod:

a {
  position: relative; /* Ustawiamy element w kontekście względnym */
  color: black;
  text-decoration: none;
  overflow: hidden; /* Ukrywamy nadmiar elementów */
}

a::before {
  content: ''; /* Pusty element */
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: yellow; /* Kolor podświetlenia */
  transition: top 0.3s ease; /* Płynne przesunięcie */
  z-index: -1; /* Tło za tekstem */
}

a:hover::before {
  top: 0; /* Przesunięcie tła na właściwe miejsce */
}

Co tu się dzieje?

a::before tworzy dodatkowy element (przed linkiem), który pełni rolę animowanego tła.
Gdy użytkownik najeżdża kursorem, tło przesuwa się z dołu na górę, tworząc efekt płynnego podświetlenia.

Co, jeśli chcesz podświetlić całą stronę?

Możesz także podświetlić większy fragment strony lub konkretną sekcję. Użyj do tego JavaScriptu, aby dynamicznie manipulować klasami CSS.

HTML:

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Podświetlanie strony</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <a href="#" class="highlight-link">Najedź na mnie!</a>
  <div class="content">To jest treść, która zostanie podświetlona.</div>

  <script src="script.js"></script>
</body>
</html>

CSS:

.content {
  padding: 20px;
  background-color: white;
  transition: background-color 0.3s ease;
}

.highlighted {
  background-color: lightblue; /* Kolor podświetlenia sekcji */
}

JavaScript (script.js):

const link = document.querySelector('.highlight-link');
const content = document.querySelector('.content');

link.addEventListener('mouseenter', () => {
  content.classList.add('highlighted'); // Dodajemy klasę
});

link.addEventListener('mouseleave', () => {
  content.classList.remove('highlighted'); // Usuwamy klasę
});

Co się tu dzieje?

HTML: Tworzymy link i sekcję do podświetlenia.
CSS: Definiujemy podstawowy styl sekcji oraz efekt podświetlenia.
JavaScript: Dodajemy klasę highlighted do sekcji, gdy użytkownik najeżdża na link, a potem ją usuwamy.

Rezultat? Podświetlenie fragmentu strony w momencie interakcji z linkiem.

Optymalizacja dla SEO

Podczas wdrażania podświetlenia pamiętaj o kilku ważnych zasadach SEO:

Zachowaj czytelność treści. Nie przesadzaj z efektami, które mogą utrudniać użytkownikom odbiór treści.
Dbaj o dostępność. Upewnij się, że kolory są odpowiednio kontrastowe dla osób z wadami wzroku.
Dodaj atrybuty title do linków. Pomaga to wyszukiwarkom zrozumieć ich znaczenie.

Przykład:

<a href="https://example.com" title="Przejdź na stronę przykładową">Przykładowy link</a>

Podświetlenie linków i fragmentów strony to prosty sposób na poprawienie interaktywności i wyglądu witryny. Dzięki CSS możesz uzyskać niesamowite efekty wizualne bez zbędnego komplikowania kodu. A jeśli chcesz pójść o krok dalej, JavaScript pozwoli Ci na bardziej dynamiczne i złożone rozwiązania.