Challenge: User Action Pseudo-Classes
Task
We have a company website with contact information in the header section. Your task is to implement a color change when a user hovers over the links in the header section.
Steps:
- Select all
aelements with theheader-linkclass. - Use the appropriate pseudo-class for the hover effect.
- Apply the
colorproperty with the valuebluewhen the links are hovered.
index.html
index.css
<!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>
/* Set the styles here */
a {
text-decoration: none;
margin: 30px;
font-size: 24px;
font-weight: 500;
}
.header-link {
color: darkgreen;
}
/* Change the code below this line */
___: ___ {
color: ___;
}
/* Change the code above this line */
.footer-link {
color: salmon;
}
Oliko kaikki selvää?
Kiitos palautteestasi!
Osio 1. Luku 7
