<html>
<head>
<meta charset="utf-8" />
<title>图文列表鼠标经过显示详情</title>
<style type="text/css">
.style1 ul li{float:left;margin:0 6px;position:relative;list-style:none}
.style1 ul li img{width: 170px;height: 120px;}
.style1 ul li span{background:rgba(0, 0, 0, 0.5);overflow:hidden;/*内部文字溢出隐藏*/
height:23px;
color:#fff;border-bottom-left-radius: 2px;border-bottom-right-radius: 2px;line-height: 23px;position:absolute;bottom: 0px;width: 170px;left:0;font-size:12px;-webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; -ms-transition: all 0.5s;}
.style1 ul li:hover span{ height:100px;}
</style>
</head>
<body>
<body class="content">
<div class="style1 ">
<h2>图文列表鼠标经过显示详情</h2>
<ul>
<li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>鼠标悬停图片变大文字消失鼠标悬停图片变大文字消失鼠标悬停图片变大文字消失鼠标悬停图片变大文字消失</span></li>
<li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>鼠标悬停图片变大文字消失</span></li>
<li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>鼠标悬停图片变大文字消失</span></li>
<li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>鼠标悬停图片变大文字消失</span></li>
</ul>
</div>
</body>
</html>
图文列表鼠标经过显示详情
最新推荐文章于 2022-08-01 16:29:41 发布