伪类，图片中出现文字·
鼠标放进图片之后：
鼠标没放进图片之前：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.touch{
width: 200px;
height: 200px;
overflow: hidden;
position: relative;
}
.touch .content{
position: absolute;
top:0;
height: 0;
left: 0;
bottom: 0;
opacity: 0.6;
color: black;
text-align: center;
visibility: hidden;
}
.touch:hover .content{
visibility: visible;
}
.touch .content .c1{
font-size: 32px;
padding: 30px 0;
}
</style>
</head>
<body>
<div class="touch">
<div><img src="2.jpg"></div>
<div class="content">
<div class="c1">NiHao</div>
<div class="c2">Wyc</div>
</div>
</div>
</body>
</html>
# visibility: hidden; 透明度隐藏本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2016-07-05 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读