[CSS3] Interactive Pseudo-Classes :link :visited :hover :active

The interactive pseudo-classes for links (and buttons) allow us to make sure the user knows what elements on the page are interactive and that they can use them to navigate the website.

 

Order is important: order -- link, then visited, then hover, then active.

a {
  text-decoration: none;
}
a:link {
  color: blue;
}
a:visited {
  color: purple;
}
a:hover {
  text-decoration: underline;
}
a:active {
  border: 1px solid;
}

 

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="link.css">
</head>
<body>
  <ul>
    <li><a href="http://egghead.io">Egghead</a></li>
    <li><a href="http://garthdb.com">Garth Braithwaite</a></li>
    <li><a href="http://google.com">Google</a></li>
    <li><a href="http://fakewebsite.notreal">Not a Website</a></li>
    <li><button>Click it!</button></li>
    <li><a id="named-anchor">Named Anchor</a></li>
  </ul>
</body>
</html>

 

posted @ 2015-12-18 03:14  Zhentiw  阅读(216)  评论(0)  编辑  收藏  举报