jquery animate 鼠标放上去显示,离开就隐藏

最新推荐文章于 2024-01-21 20:09:39 发布

peking2009

最新推荐文章于 2024-01-21 20:09:39 发布

阅读量1.6k

点赞数

分类专栏： js jQuery 文章标签： jquery animate

本文链接：https://blog.csdn.net/peking2009/article/details/9380851

版权

js 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

jQuery

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function () {
$(".hz-ads").hover(function () {
$(this).find('.hzgp-company').animate({
left: '0'
});
},
function () {
$(this).find('.hzgp-company').animate({
left: '260'
});
}
);
});
</script>
<style type="text/css">
*{margin:0;padding:0;}
body{font-size:12px;color:#333;}
img{border:0;}
ul,li{list-style:none;}
div,ul,li,dl,dt,dd,table,td,input{font:12px/24px "宋体";}
a{color:#333333;text-decoration:none;}
a:hover{color:#C00;}

.wrap{clear:both;width:970px; margin:0 auto;overflow:hidden;}
.mat10{margin-top:10px !important;}
.clear{clear:both;}
/* 推荐产业带 */
.hz-ads{margin-right:1px;overflow:hidden;width:260px;position:relative; height:330px;float:left;}
.hz-ads ul{margin:0px;padding:0px;overflow:hidden;position:relative}
.hz-ads ul .hzgp-company{background:#fff;filter:alpha(opacity=92);-moz-opacity:0.5;opacity:0.9;color:#8b817f;font-size:12px;height:324px;overflow:hidden;padding:0;text-align:left;width:260px;z-index:1;left:260px;position:absolute;top:0;}
.hz-ads ul .hzgp-company .tab_tx1{width:230px;margin-top:10px;margin-left:15px;}
.hz-ads ul .hzgp-company .tab_tx1 dt{float:left;width:120px;font-size:16px; font-family:"微软雅黑";}
.hz-ads ul .hzgp-company .tab_tx1 dt a{font-family:"微软雅黑";color:#444444;}
.hz-ads ul .hzgp-company .tab_tx1 dd{float:left;width:110px;}
.hz-ads ul .hzgp-company .tab_tx1 dd span{color:#ff0000;}
.hz-ads ul .hzgp-company .tab_tx2,.hz-ads ul .hzgp-company .tab_tx3{clear:both;width:230px;margin-top:10px;margin-left:15px;width:230px;overflow:hidden;line-height:26px;}
.hz-ads ul .hzgp-company .tab_tx2{border-top:1px solid #e7e7e7;border-bottom:1px solid #e7e7e7;height:20px;overflow:hidden;padding:12px 0;}
.hz-ads ul .hzgp-company .tab_tx3{height:130px;overflow:hidden;padding:15px a0;}
.hz-ads ul .hzgp-company .tab_bt{clear:both;width:94px;height:28px;background:url(http://image.hc360.com/cyd/images/cyd_bt_bj.gif) no-repeat;text-align:center;color:#fff;font-weight:bold;line-height:28px;margin:15px auto 0;}
.hz-ads ul .hzgp-company .tab_bt a{color:#fff;}

</style>

</head>

<body>

<div class="wrap">

<div class="tab-content">

<div id="tab-content0" style="display: block;">
<div class="tab_pic_l">
<div class="hz-ads">
<ul>
<li><img src="http://img00.hc360.com/news/201305/201305211357334500.jpg"><br>
</li>
<li class="hzgp-company" >
<div class="tab_tx1"><dl><dt><a href="http://www.cago365.com/products">广东佛山></a></dt><dd><span>1604</span>家企业<br><span>64079</span>款产品</dd></dl></div><div class="tab_tx2"><strong>涉及行业：</strong>钢铁、建材、卫浴洁具、装饰材料</div><div class="tab_tx3">广东佛山，有“世界工厂”之美称，是全球最大的制造业基地之一，制造业总产值占规模以上工业总产值的90%以上，形成以电子信息、电气机械、纺织服装、家具、玩具、造纸及纸制品业、食品饮料、化工等八大产业为支柱的现代化工业体系... </div><div class="tab_bt"><a href="http://www.cago365.com.com/">进入产业带</a></div><br>
</li>
</ul>
</div>


<div class="hz-ads">
<ul>
<li style="left: 0px;"><img src="http://img00.hc360.com/news/201305/201305211357334500.jpg"><br>
</li>
<li class="hzgp-company" left="260">
<div class="tab_tx1"><dl><dt><a href="http://www.gj.cago365.com/">广东佛山></a></dt><dd><span>1604</span>家企业<br><span>64079</span>款产品</dd></dl></div><div class="tab_tx2"><strong>涉及行业：</strong>钢铁、建材、卫浴洁具、装饰材料</div><div class="tab_tx3">广东佛山，有“世界工厂”之美称，是全球最大的制造业基地之一，制造业总产值占规模以上工业总产值的90%以上，形成以电子信息、电气机械、纺织服装、家具、玩具、造纸及纸制品业、食品饮料、化工等八大产业为支柱的现代化工业体系... </div><div class="tab_bt"><a href="http://www.gj.cago365.com">进入产业带</a></div><br>
</li>
</ul>
</div>

<div class="hz-ads">
<ul>
<li style="left: 0px;"><img src="http://img00.hc360.com/news/201305/201305211357334500.jpg"><br>
</li>
<li class="hzgp-company" left="260">
<div class="tab_tx1"><dl><dt><a href="http://www.jc.cago365.com">广东佛山></a></dt><dd><span>1604</span>家企业<br><span>64079</span>款产品</dd></dl></div><div class="tab_tx2"><strong>涉及行业：</strong>钢铁、建材、卫浴洁具、装饰材料</div><div class="tab_tx3">广东佛山，有“世界工厂”之美称，是全球最大的制造业基地之一，制造业总产值占规模以上工业总产值的90%以上，形成以电子信息、电气机械、纺织服装、家具、玩具、造纸及纸制品业、食品饮料、化工等八大产业为支柱的现代化工业体系... </div><div class="tab_bt"><a href="http://www.jc.cago365.com">进入产业带</a></div><br>
</li>
</ul>
</div>

</div>

</div>




</div>
</div>

</body></html>