您的位置:首页 > Web前端 > CSS

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

2015-12-18 03:14 781 查看
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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: