码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-12-18 06:55:24      阅读:138      评论:0      收藏:0      [点我收藏+]

标签:

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>

 

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

标签:

原文地址:http://www.cnblogs.com/Answer1215/p/5055917.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!