css · level 1 · unit 7 · lesson 3
- meet it
- guess first
- your turn
- fix it
- nailed it
Tap a green word if you get lost.
meet it
changes the style while the pointer is on top.
To hover is to rest the mouse pointer over something without clicking. Pages use it to show what you can click: a button lights up, a link changes colour.
:hover goes straight after a selector, with no space: button:hover. It is a , a word after a colon that picks elements only while they are in a certain state.
The normal rule sets the usual look, and the hover rule only lists what changes. Touch screens have no pointer, so never hide anything important behind a hover.
<button class="go">Start</button>.go {
color: white;
background-color: seagreen;
padding: 12px 24px;
}
.go:hover {
background-color: darkgreen;
}Press show my page to see it here.
<button> is a button people can press. Point at it to see the hover colour.
guess first
Before you point at it, what colour is the link?
Guess before you run it. Wrong guesses are how you learn, and nothing is marked.
<a href="https://example.com/games">Play games</a>a {
color: navy;
}
a:hover {
color: orange;
}your turn
Your turn. Make the button light up.
Fill in the hover rule so the button turns a new background colour while the pointer is on it. Keep the first rule as it is.
the page you’re styling
<button>Press me</button>your css
Press show my page to see it here.
- the button is blue when restingnot checked yet
- the button changes colour on hovernot checked yet
fix it
Pointing at the button does nothing. Fix it!
the page you’re styling
<button class="like">Like</button>your css
Press show my page to see it here.
- the button is gray when restingnot checked yet
- the hover rule belongs to
.likenot checked yet
- The normal rule works but the hover rule does not. Look closely at its selector.
:hovermust touch the selector before it, with nothing in between.- Remove the space so it reads
.like:hover, then press run.
nailed it
your page reacts to the pointer now. :D
:hoverstyles an element while the pointer is over it.- Write it with no space:
button:hover. - The hover rule only lists what changes.
new words in your collection
- hover
- pseudo-class
This lesson isn’t saved. A free account remembers every lesson you finish.