html:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link href="css/demo3.css" rel="stylesheet" />
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/demo3.js"></script>
</head>
<body>
<div id="igs">
<div class="ig ig1">
<div class="txts">
<p class="p1">作者 ： 默默的墨墨</p>
<p class="p2">我的个人拉萨之旅｜｜故事之城</p>
</div>
</div>
<div class="ig ig2">
<div class="txts">
<p class="p1">作者 ： 默默的墨墨</p>
<p class="p2">我的个人拉萨之旅｜｜故事之城</p>
</div>
</div>
<div class="ig ig3">
<div class="txts">
<p class="p1">作者 ： 默默的墨墨</p>
<p class="p2">我的个人拉萨之旅｜｜故事之城</p>
</div>
</div>
<div class="ig ig4">
<div class="txts">
<p class="p1">作者 ： 默默的墨墨</p>
<p class="p2">我的个人拉萨之旅｜｜故事之城</p>
</div>
</div>
</div>
</body>
</html>
css:
*{
padding:0px;
margin:0px;
font-family:"微软雅黑";
}
.ig{
height:430px;
100px;
float:left;
cursor:pointer;
}
#igs{
height:430px;
1100px;
}
.ig1{
background-image:url("../img/1.jpg");
}
.ig2{
background-image:url("../img/2.jpg");
}
.ig3{
background-image:url("../img/3.jpg");
}
.ig4{
789px;
background-image:url("../img/4.jpg");
}
.txts{
height:430px;
100px;
background:rgba(0,0,0,.5);
}
.txts p{
color:#fff;
float:left;
margin:15px;
}
.p1{/*让文字竖排*/
12px;
font-size:12px;
}
.p2{
14px;
font-size:14px;
}
js:
$(function () {
$(".txts").mouseover(function () {
$(this).parent().stop(true,true).animate({ "width": "789px" }, 500).siblings().stop(true,true).animate({ "width": "100px" }, 500);
});
});