<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Display演示</title>
<style>
div {
width: 600px;
}
div a {
width: 99px;
height: 38px;
color: #fff;
background: #6CF;
display:inline-block;
text-align: center;
text-decoration: none;
margin-right: 1px;
font-family: "微软雅黑";
line-height: 38px; /* display显示效果,inline行间,block块状*/
}
div a:hover {
background: #F90;
}
div .add{display:none;}
div:hover .add{display:inline-block;}
</style>
</head>
<body>
<div> <a href="#">推荐网站</a><a href="#" class="add">新闻头条</a><a href="#" class="add">电视剧</a><a href="#" class="add">最新电影</a><a href="#" class="add">小游戏</a><a href="#" class="add">旅游资讯</a> </div>
</body>
</html>
Display状态转换效果演示
猜你喜欢
转载自blog.csdn.net/qq_41681743/article/details/82287076
今日推荐
周排行