You’ve seen one pseudo-class before; I just didn’t tell you that’s what it was. When we hovered over a link, we used one. Instead of just the selector a to target the link, we used a:hover to target a link that someone had their mouse on.

We can also use :active and :visited on our links. You can use these psudo-classes on any selector, but these features will most be used with links, even if those links are really <button>  or .choice selectors.

Maybe you have tabs at the top of the page. The link they clicked on can appear a certain color to show that’s the page you are on. Visited links can stay a different color once they’ve been clicked on. That way, people know they’ve used that link already. That can be useful if you have a list of links on your page.

Since, we talked about display: none, you can use pseudo classes to achieve that effect. When you click on something, something disappears or appears.

#answer:active { display: block; }

#answer:hover { display: block; }

The first one, active, would put it on the page. The second one would show it only when you were hovering over the element tagged with the id of active. The problem with that is the screen would flicker and jump around because an element would be added and removed from the page as the mouse moved. Visibility: hidden and visibility: visible are options that would keep the element on the screen, just show it or not show it.

Other tricks for helping people see and use your links is to make their cursor point out what’s clickable. You can give the property of cursor the value of pointer to get a little pointer finger showing up when they are over that element on the page. You can give your cursor other images as well.

It’s nice to use transitions when you are making things change on the page so that they are not abrupt. We’ve used transition-duration before. There is a transition-delay if you don’t want something to happen right away. You could use that to make a surprise on your page, or if you want them to read something before they move on to the new page. A transition-timing-function is things like ease-in and ease-out, but there are other options as well. These make the transition quick and then slow or slow and then quick or just even, etc.

You can see the lesson and watch a hover animation.