In my lessons, I can only remember using a:hover to determine the change in a button to another color when the mouse is hovering over the button. How do I get this code to do this and also become clickable as a link? I cannot figure it out even though it seems eveything to do this is already there.
<body>
<div tabindex="1" class="overlay"></div>
<header>
<h1>Even Deeper Thoughts with Master Camper Cat</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Training</a></li>
</ul>
</nav>
</header>
<form>
<label for="search">Search:</label>
<input tabindex="1" type="search" name="search" id="search">
<input type="submit" tabindex="2" name="submit" value="Submit" id="submit">
</form>
<h2>Inspirational Quotes</h2>
<blockquote>
<p>“There's no Theory of Evolution, just a list of creatures I've allowed to live.”<br>
- Chuck Norris</p>
</blockquote>
<blockquote>
<p>“Wise men say forgiveness is divine, but never pay full price for late pizza.”<br>
- TMNT</p>
</blockquote>
<footer>© 2018 Camper Cat</footer>
</body>
<style>
body {
height: 100%;
margin: 0 !important;
padding: 8px;
}
.overlay {
margin: -8px;
position: absolute;
width: 100%;
height: 100%;
}
a:hover{
color: green;
}
</style>
The link to the challenge is https://www.freecodecamp.org/learn/responsive-web-design/applied-accessibility/use-tabindex-to-specify-the-order-of-keyboard-focus-for-several-elements
I can finish the challenge but I am trying to go above and beyond the lesson so I gain practice.