<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.clearfix:after,
.cf:after {
content: "\200B";
display: block;
height: 0;
clear: both;
}
.clearfix,
.cf {
*zoom: 1;
}
.nIndexHot {margin-top: 10px; width: 100%; overflow: hidden;}
.nIndexHot ul {float: left; width: 900px; margin-top: -20px;}
.nIndexHot li {float: left; width: 270px; height: 140px; margin: 20px 20px 0 0; display: inline; position: relative;}
.nIndexHot img {display: block; border-radius: 10px;}
.nIndexHot h2 {height: 40px; line-height: 40px; color: #fff; font-size: 30px; position: absolute; left: 20px; top: 60px; z-index: 3;}
.nIndexHot h3 {height: 20px; line-height: 20px; color: #fff; font-size: 16px; font-family: Microsoft YaHei; position: absolute; left: 20px; top: 100px; z-index: 3;}
.nIndexHot a {width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 4; background: url(about:blank);}
.nIndexHot .layer {width: 100%; height: 50px; position: absolute; left: 0; bottom: 0; z-index: 2; background: #000; opacity: 0.5; filter: alpha(opacity=50);
border-radius: 10px;}
</style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function() {
$(".nIndexHot li").on("mouseenter", function() {
var n = $(this),
i = n.children("h2"),
t = n.children("h3"),
r = n.children(".layer");
t.text(t.attr("text2"));
i.stop().animate({
top: "20px"
}, 300);
r.stop().animate({
height: "140px"
}, 300)
}).on("mouseleave", function() {
var n = $(this),
i = n.children("h2"),
t = n.children("h3"),
r = n.children(".layer");
t.text(t.attr("text1"));
i.stop().animate({
top: "60px"
}, 300);
r.stop().animate({
height: "50px"
}, 300)
})
});
</script>
</head>
<body>
<div class="nIndexHot clearfix">
<ul>
<li>
<img src="" alt="">
<h2 style="top: 60px;">SHANGHAI</h2>
<h3 text2="从上海起运的航线价格>" text1="上海起运">上海起运</h3>
<a href="http://www.yunquna.com/wlsc.html?sf=SHANGHAI&FromTerminalIDs=8951"></a>
<div class="layer" style="height: 50px;"></div>
</li>
<li>
<img src="./运去哪-发货揽货，交易无忧_files/shenzhen.png" alt="从深圳起运的航线价格">
<h2 style="top: 60px;">SHENZHEN</h2>
<h3 text2="从深圳起运的航线价格>" text1="深圳起运">深圳起运</h3>
<a href="http://www.yunquna.com/wlsc.html?sf=SHENZHEN&FromTerminalIDs=8982"></a>
<div class="layer" style="height: 50px;"></div>
</li>
<li>
<img src="./运去哪-发货揽货，交易无忧_files/guangzhou.png" alt="从广州起运的航线价格">
<h2 style="top: 60px;">GUANGZHOU</h2>
<h3 text2="从广州起运的航线价格>" text1="广州起运">广州起运</h3>
<a href="http://www.yunquna.com/wlsc.html?sf=GUANGZHOU&FromTerminalIDs=3427"></a>
<div class="layer" style="height: 50px;"></div>
</li>
<li>
<img src="./运去哪-发货揽货，交易无忧_files/ningbo.png" alt="从宁波起运的航线价格">
<h2 style="top: 60px;">NINGBO</h2>
<h3 text2="从宁波起运的航线价格>" text1="宁波起运">宁波起运</h3>
<a href="http://www.yunquna.com/wlsc.html?sf=NINGBO&FromTerminalIDs=6363"></a>
<div class="layer" style="height: 50px;"></div>
</li>
<li>
<img src="./运去哪-发货揽货，交易无忧_files/qingdao.png" alt="从青岛起运的航线价格">
<h2 style="top: 60px;">QINGDAO</h2>
<h3 text2="从青岛起运的航线价格>" text1="青岛起运">青岛起运</h3>
<a href="http://www.yunquna.com/wlsc.html?sf=QINGDAO&FromTerminalIDs=7995"></a>
<div class="layer" style="height: 50px;"></div>
</li>
<li>
<img src="./运去哪-发货揽货，交易无忧_files/tianjin.png" alt="从天津起运的航线价格">
<h2 style="top: 60px;">TIANJIN</h2>
<h3 text2="从天津起运的航线价格>" text1="天津起运">天津起运</h3>
<a href="http://www.yunquna.com/wlsc.html?sf=TIANJIN&FromTerminalIDs=9929"></a>
<div class="layer" style="height: 50px;"></div>
</li>
</ul>
</div>
</body>
</html>
浙公网安备 33010602011771号