HTML代码
<body>
<nav>
<div>
<p>这是一段消息</p>
<h3>标题</h3>
</div>
<div>
<p>这是一段消息</p>
<h3>标题</h3>
</div>
<div>
<p>这是一段消息</p>
<h3>标题</h3>
</div>
<div>
<p>这是一段消息</p>
<h3>标题</h3>
</div>
<div>
<p>这是一段消息</p>
<h3>标题</h3>
</div>
<div>
<p>这是一段消息</p>
<h3>标题</h3>
</div>
</nav>
</body>
CSS代码
<style>
*{
list-style: none;
text-decoration:none;
margin: 0;
padding: 0;
}
body{
background-color: rgb(47, 104, 194);
}
nav{
/* 固定左侧消息栏让其不随页面滚动 */
position: fixed;
}
nav div{
/* 设置div容器大小 */
width:50px;
height: 50px;
/* 当文本溢出隐藏 */
overflow: hidden;
/* 设置nav中全部容器弹出的延迟时间 */
transition:all 1s;
background-color: cadetblue;
/* 设置div圆角 */
border-radius: 25px 25px 25px 25px;
}
nav div p{
/* 设置文本行高 */
line-height: 50px;
margin-left: 5px;
/* 未触发div隐藏 */
display: none;
}
nav div h3{
float: right;
margin-right: 5px;
line-height: 50px;
}
nav div:hover{
/* 当触发div文本居中并扩大div容器的宽度 */
text-align: center;
width: 400px;
}
nav div:hover h3{
/* 当div被触发隐藏标题 */
display: none;
}
nav div:hover p{
/* 当div被触发显示文本 */
display: block;
}
</style>
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>左侧活动消息栏</title>
<style>
*{
list-style: none;
text-decoration:none;
margin: 0;
padding: 0;
}
body{
background-color: rgb(47, 104, 194);
}
nav{
/* 固定左侧消息栏让其不随页面滚动 */
position: fixed;
}
nav div{
/* 设置div容器大小 */
width:50px;
height: 50px;
/* 当文本溢出隐藏 */
overflow: hidden;
/* 设置nav中全部容器弹出的延迟时间 */
transition:all 1s;
background-color: cadetblue;
/* 设置div圆角 */
border-radius: 25px 25px 25px 25px;
}
nav div p{
/* 设置文本行高 */
line-height: 50px;
margin-left: 5px;
/* 未触发div隐藏 */
display: none;
}
nav div h3{
float: right;
margin-right: 5px;
line-height: 50px;
}
nav div:hover{
/* 当触发div文本居中并扩大div容器的宽度 */
text-align: center;
width: 400px;
}
nav div:hover h3{
/* 当div被触发隐藏标题 */
display: none;
}
nav div:hover p{
/* 当div被触发显示文本 */
display: block;
}
</style>
</head>
<body>
<nav>
<div>
<p>这是一段消息</p>
<h3>标题</h3>
</div>
<div>
<p>这是一段消息</p>
<h3>标题</h3>
</div>
<div>
<p>这是一段消息</p>
<h3>标题</h3>
</div>
<div>
<p>这是一段消息</p>
<h3>标题</h3>
</div>
<div>
<p>这是一段消息</p>
<h3>标题</h3>
</div>
<div>
<p>这是一段消息</p>
<h3>标题</h3>
</div>
</nav>
</body>
</html>