Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Вивчайте Челендж: Псевдокласи Дій Користувача | Вступ до CSS
Основи CSS

book
Челендж: Псевдокласи Дій Користувача

Завдання

У нас є сайт компанії. У шапці сторінки є контактна інформація. Завдання полягає в тому, щоб додати зміну кольору при наведенні мишею на посилання в шапці сайту.

Крок за кроком:

  1. Виберіть всі елементи a з назвою класу header-link.
  2. Встановіть відповідний псевдоклас.
  3. Застосуйте властивість color зі значенням blue.
html

index.html

css

index.css

copy
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<header>
<a class="header-link" href="mailto:support@dev.io">support@dev.io</a>
<a class="header-link" href="tel:+4127203413">412-720-3413</a>
</header>
<section>
<p>
At SupportDev, our mission is to empower individuals and businesses by
providing top-notch technical support. We understand the challenges that
come with navigating the complex world of technology, and we are here to
simplify it for you. Whether you're a startup, a small business, or an
individual seeking assistance, SupportDev is your trusted partner in
technology.
</p>
</section>
<footer>
<a class="footer-link" href="mailto:support@dev.io">support@dev.io</a>
<a class="footer-link" href="tel:+4127203413">412-720-3413</a>
</footer>
</body>
</html>
  • Використовуйте . та назву класу, щоб вибрати елемент за назвою класу.
  • Використовуйте псевдоклас :hover для реагування на наведення курсору миші.
html

index.html

css

index.css

copy
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<header>
<a class="header-link" href="mailto:support@dev.io">support@dev.io</a>
<a class="header-link" href="tel:+4127203413">412-720-3413</a>
</header>
<section>
<p>
At SupportDev, our mission is to empower individuals and businesses by
providing top-notch technical support. We understand the challenges that
come with navigating the complex world of technology, and we are here to
simplify it for you. Whether you're a startup, a small business, or an
individual seeking assistance, SupportDev is your trusted partner in
technology.
</p>
</section>
<footer>
<a class="footer-link" href="mailto:support@dev.io">support@dev.io</a>
<a class="footer-link" href="tel:+4127203413">412-720-3413</a>
</footer>
</body>
</html>
Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 1. Розділ 7
some-alt