一張圖片效果是正常的，多張圖片效果會混亂，不知道哪里有問題？
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
a{
color:#fff;
text-decoration: none;
font-size:12px;
}
.container{
overflow:hidden;
}
.box{
width:25%;
float:left;
position:relative;
}
.content{
width:350px;
height:400px;
color:#fff;
display: none;
position:absolute;
bottom:5px;
background-color: rgba(0,0,0,0.8);
}
.textSty{
font-size:26px;
}
.point_bottom{
width:5px;
height:5px;
background-color: #ce1b2e;
position:absolute;
z-index:4;
left:30px;
bottom:80px;
transition: bottom 0.5,opacity 0.5;
}
.point_bottom::after{
content:"";
width:1px;
height:150px;
background-color: rgba(255,255,255,0.3);
position:absolute;
top:5px;
left:2px;
}
.point_top{
width:5px;
height:5px;
background-color: #ce1b2e;
position:absolute;
z-index:4;
left:30px;
top:-5px;
opacity:0;
transition: top 0.5,opacity 0.5;
}
.point_top::after{
content:"";
width:1px;
height:150px;
background-color: rgba(255,255,255,0.3);
position:absolute;
bottom:5px;
left:2px;
}
.item{
width:80%;
margin:0 auto;
position:relative;
top:36px;
left:10px;
}
.tipShow{
top:80px;
opacity:1;
}
.tipHidden{
bottom:0px;
opacity:0;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script></head>
<body>
<div class="container">
<div class="box">
<img src="http://www.pactera.com/-/media/PacteraOW/PageImages/HomePage/beating_notes/technology_350-400.ashx?h=400&la=zh-CN&w=350&hash=DA7BD5A87C3DA8C8444FE0C1749D21B5A0EFC73F" alt="animation" id="img1"/>
<div class="content" id="img1Content">
<div class="item">
<p class="textSty">技術(shù)實(shí)施</p>
<ul style="min-height:230px;">
<li>數(shù)字化咨詢</li>
<li>其他咨詢服務(wù)</li>
</ul>
<a href="#">了解詳情>></a>
</div>
</div>
<div class="point_top" id="img1PointTop"></div>
<div class="point_bottom" id="img1PointBottom"></div>
</div>
<div class="box">
<img src="http://www.pactera.com/-/media/PacteraOW/PageImages/HomePage/beating_notes/digital-engagement_350-400.ashx?h=400&la=zh-CN&w=350&hash=CF10CAAA12205064F3219B206F3AB85676E62E20" alt="animation" id="img2"/>
<div class="content" id="img2Content">
<div class="item">
<p class="textSty">體驗(yàn)交互</p>
<ul style="min-height:230px;">
<li>數(shù)字化咨詢</li>
<li>其他咨詢服務(wù)</li>
</ul>
<a href="#">了解詳情>></a>
</div>
</div>
<div class="point_top" id="img2PointTop"></div>
<div class="point_bottom" id="img2PointBottom"></div>
</div>
<div class="box">
<img src="http://www.pactera.com/-/media/PacteraOW/PageImages/HomePage/beating_notes/consulting_350-400.ashx?h=400&la=zh-CN&w=350&hash=C9087A3B12AA79DC925DEAC5E76821F4D1BF2D2D" alt="animation" id="img3"/>
<div class="content" id="img3Content">
<div class="item">
<p class="textSty">咨詢服務(wù)</p>
<ul style="min-height:230px;">
<li>數(shù)字化咨詢</li>
<li>其他咨詢服務(wù)</li>
</ul>
<a href="#">了解詳情>></a>
</div>
</div>
<div class="point_top" id="img3PointTop"></div>
<div class="point_bottom" id="img3PointBottom"></div>
</div>
<div class="box">
<img src="http://www.pactera.com/-/media/PacteraOW/PageImages/HomePage/beating_notes/operations_350-400.ashx?h=400&la=zh-CN&w=350&hash=495027AB1A371D85C9D2B4CC7545470A8B50DFF9" alt="animation" id="img4"/>
<div class="content" id="img4Content">
<div class="item">
<p class="textSty">運(yùn)營服務(wù)</p>
<ul style="min-height:230px;">
<li>數(shù)字化咨詢</li>
<li>其他咨詢服務(wù)</li>
</ul>
<a href="#">了解詳情>></a>
</div>
</div>
<div class="point_top" id="img4PointTop"></div>
<div class="point_bottom" id="img4PointBottom"></div>
</div>
</div>
<script>
$(".container").on("mouseover",".box img",function(){
$(this).parent().find(".content").slideDown(200)
$(this).parent().siblings(".box").find('.content').slideUp(200)
$(this).parent().find('div[id$=PointTop]').addClass("tipShow");
$(this).parent().find('div[id$=PointBottom]').addClass("tipHidden")
})
$(".container").on("mouseout",".box .content",function(){
$(this).slideUp(200)
$(this).parent().find('div[id$=PointTop]').removeClass("tipShow");
$(this).parent().find('div[id$=PointBottom]').removeClass("tipHidden")
});
</script></body>
</html>
用css很好解決的，完美
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
a {
color: #fff;
text-decoration: none;
font-size: 12px;
}
.container {
overflow: hidden;
}
.box {
width: 25%;
float: left;
position: relative;
}
.content {
width: 350px;
height: 400px;
color: #fff;
position: absolute;
bottom: -400px;
background-color: rgba(0, 0, 0, 0.8);
transition: transform ease 0.2s;
}
.box:hover .content {
transform: translate3d(0, -100%, 0)
}
.box:hover .point_bottom {
opacity: 0;
bottom: 0;
}
.box:hover .point_top {
opacity: 1;
top: 80px;
}
.textSty {
font-size: 26px;
}
.point_bottom {
width: 5px;
height: 5px;
background-color: #ce1b2e;
position: absolute;
z-index: 4;
left: 30px;
bottom: 80px;
transition: all ease 0.5s;
}
.point_bottom::after {
content: "";
width: 1px;
height: 150px;
background-color: rgba(255, 255, 255, 0.3);
position: absolute;
top: 5px;
left: 2px;
}
.point_top {
width: 5px;
height: 5px;
background-color: #ce1b2e;
position: absolute;
z-index: 4;
left: 30px;
top: 0;
opacity: 0;
transition: all ease 0.5s;
}
.point_top::after {
content: "";
width: 1px;
height: 150px;
background-color: rgba(255, 255, 255, 0.3);
position: absolute;
top: -150px;
left: 2px;
}
.item {
width: 80%;
margin: 0 auto;
position: relative;
top: 36px;
left: 10px;
}
.tipShow {
top: 80px;
opacity: 1;
}
.tipHidden {
bottom: 0px;
opacity: 0;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div class="container">
<div class="box">
<img src="http://www.pactera.com/-/media/PacteraOW/PageImages/HomePage/beating_notes/technology_350-400.ashx?h=400&la=zh-CN&w=350&hash=DA7BD5A87C3DA8C8444FE0C1749D21B5A0EFC73F"
alt="animation" id="img1" />
<div class="content" id="img1Content">
<div class="item">
<p class="textSty">技術(shù)實(shí)施</p>
<ul style="min-height:230px;">
<li>數(shù)字化咨詢</li>
<li>其他咨詢服務(wù)</li>
</ul>
<a href="#">了解詳情>></a>
</div>
</div>
<div class="point_top" id="img1PointTop"></div>
<div class="point_bottom" id="img1PointBottom"></div>
</div>
<div class="box">
<img src="http://www.pactera.com/-/media/PacteraOW/PageImages/HomePage/beating_notes/digital-engagement_350-400.ashx?h=400&la=zh-CN&w=350&hash=CF10CAAA12205064F3219B206F3AB85676E62E20"
alt="animation" id="img2" />
<div class="content" id="img2Content">
<div class="item">
<p class="textSty">體驗(yàn)交互</p>
<ul style="min-height:230px;">
<li>數(shù)字化咨詢</li>
<li>其他咨詢服務(wù)</li>
</ul>
<a href="#">了解詳情>></a>
</div>
</div>
<div class="point_top" id="img2PointTop"></div>
<div class="point_bottom" id="img2PointBottom"></div>
</div>
<div class="box">
<img src="http://www.pactera.com/-/media/PacteraOW/PageImages/HomePage/beating_notes/consulting_350-400.ashx?h=400&la=zh-CN&w=350&hash=C9087A3B12AA79DC925DEAC5E76821F4D1BF2D2D"
alt="animation" id="img3" />
<div class="content" id="img3Content">
<div class="item">
<p class="textSty">咨詢服務(wù)</p>
<ul style="min-height:230px;">
<li>數(shù)字化咨詢</li>
<li>其他咨詢服務(wù)</li>
</ul>
<a href="#">了解詳情>></a>
</div>
</div>
<div class="point_top" id="img3PointTop"></div>
<div class="point_bottom" id="img3PointBottom"></div>
</div>
<div class="box">
<img src="http://www.pactera.com/-/media/PacteraOW/PageImages/HomePage/beating_notes/operations_350-400.ashx?h=400&la=zh-CN&w=350&hash=495027AB1A371D85C9D2B4CC7545470A8B50DFF9"
alt="animation" id="img4" />
<div class="content" id="img4Content">
<div class="item">
<p class="textSty">運(yùn)營服務(wù)</p>
<ul style="min-height:230px;">
<li>數(shù)字化咨詢</li>
<li>其他咨詢服務(wù)</li>
</ul>
<a href="#">了解詳情>></a>
</div>
</div>
<div class="point_top" id="img4PointTop"></div>
<div class="point_bottom" id="img4PointBottom"></div>
</div>
</div>
</body>
</html>
北大青鳥APTECH成立于1999年。依托北京大學(xué)優(yōu)質(zhì)雄厚的教育資源和背景，秉承“教育改變生活”的發(fā)展理念，致力于培養(yǎng)中國IT技能型緊缺人才，是大數(shù)據(jù)專業(yè)的國家
北大青鳥中博軟件學(xué)院創(chuàng)立于2003年，作為華東區(qū)著名互聯(lián)網(wǎng)學(xué)院和江蘇省首批服務(wù)外包人才培訓(xùn)基地，中博成功培育了近30000名軟件工程師走向高薪崗位，合作企業(yè)超4
中公教育集團(tuán)創(chuàng)建于1999年，經(jīng)過二十年潛心發(fā)展，已由一家北大畢業(yè)生自主創(chuàng)業(yè)的信息技術(shù)與教育服務(wù)機(jī)構(gòu)，發(fā)展為教育服務(wù)業(yè)的綜合性企業(yè)集團(tuán)，成為集合面授教學(xué)培訓(xùn)、網(wǎng)
達(dá)內(nèi)教育集團(tuán)成立于2002年，是一家由留學(xué)海歸創(chuàng)辦的高端職業(yè)教育培訓(xùn)機(jī)構(gòu)，是中國一站式人才培養(yǎng)平臺、一站式人才輸送平臺。2014年4月3日在美國成功上市，融資1
曾工作于聯(lián)想擔(dān)任系統(tǒng)開發(fā)工程師，曾在博彥科技股份有限公司擔(dān)任項(xiàng)目經(jīng)理從事移動互聯(lián)網(wǎng)管理及研發(fā)工作，曾創(chuàng)辦藍(lán)懿科技有限責(zé)任公司從事總經(jīng)理職務(wù)負(fù)責(zé)iOS教學(xué)及管理工作。
浪潮集團(tuán)項(xiàng)目經(jīng)理。精通Java與.NET 技術(shù)， 熟練的跨平臺面向?qū)ο箝_發(fā)經(jīng)驗(yàn)，技術(shù)功底深厚。 授課風(fēng)格 授課風(fēng)格清新自然、條理清晰、主次分明、重點(diǎn)難點(diǎn)突出、引人入勝。
精通HTML5和CSS3；Javascript及主流js庫，具有快速界面開發(fā)的能力，對瀏覽器兼容性、前端性能優(yōu)化等有深入理解。精通網(wǎng)頁制作和網(wǎng)頁游戲開發(fā)。
具有10 年的Java 企業(yè)應(yīng)用開發(fā)經(jīng)驗(yàn)。曾經(jīng)歷任德國Software AG 技術(shù)顧問，美國Dachieve 系統(tǒng)架構(gòu)師，美國AngelEngineers Inc. 系統(tǒng)架構(gòu)師。
掃碼關(guān)注鍍金池微信號
手機(jī)訂課，優(yōu)惠多多