鼠标移入移出table图制作

实现效果: 鼠标移到汇款支付时候下边框变成橙色下拉框变化, 移动到融e购时候下半框变成橙色下拉框变化;

一、html部分;

</li>

</li>

</li>

</li>

</li>

</li>

</ul>

<d>精选品质好物</d>

</li>

<d>共创美好生活</d>

</li>

</div>

</div>

</li>

<d>每日秒杀大放价</d>

</li>

</div>

</li>

<d>每日秒杀大放价</d>

</li>

</div>

<p>工银e支付</p>

<d>任选多种认证方式</d>

</li>

<d>小额支付免密</d>

</li>

</div>

</div>

<d>7*24小时随时随地轻松汇</d>

</li>

<d>支持网上预约</d>

</li>

</div>

<p>余额变动提醒</p>

<d>账户余额适时变动掌握</d>

</li>

<d>包年享八三折优惠</d>

</li>

</div>

<p>途牛信用卡</p>

<d>每季度至少4条工行专属特惠线路</d>

</li>

</li>

</div>

</div>

<p>工银故宫联名信用卡</p>

<d>限时免年费</d>

</li>

</li>

</div>

<p>工银生肖信用卡</p>

</li>

<d>绑卡消费首笔免单</d>

</li>

</div>

</li>

<d>汇款速度快</d>

</li>

</div>

</div>

<p>出国金融卡</p>

<d>境外取现免手续费</d>

</li>

<d>免收卡年费</d>

</li>

</div>

<p>个人资信证明</p>

</li>

</div>

<p>融e行手机银行</p>

</li>

<d>放在兜里的手机营业厅</d>

</li>

</div>

</div>

<d>免费余额提醒</d>

</li>

</li>

</div>

<d>轻松查询账户信息</d>

</li>

<d>随时获取金融咨询</d>

</li>

</div>

<d>无抵押无担保</d>

</li>

<d>按天数计息,利率差异化定价</d>

</li>

</div>

</div>

<p>住房公积金贷款</p>

<d>利率更优惠</d>

</li>

<d>组合融资更灵活</d>

</li>

</div>

<p>自用车贷款</p>

<d>可贷车辆市价80%</d>

</li>

</li>

</div>

二、css部分

.f72{

min-width: 1000px;

margin: 0 auto;

max-width: 1000px;

height: 506px;

padding-top: 20px;

}

.a14{

width: 1000px;

height: 45px;

border-bottom: 1px #e5e5e5 solid;

z-index: 10px;

display: block;

}

.a14 ul li{

float: left;

height: 45px;

line-height: 45px;

width: 140px;

text-align: center;

font-size: 18px;

cursor: pointer;

color: #000000;

margin-left: 10px;

position: relative;

}

/* .a14 ul li p:hover{

border-bottom: 2px solid #ffae00 ;

} */

.a14 li:hover{

color: #c7000b;

}

.a15{

width: 667px;

height: 460px;

position: relative;

cursor: pointer;

}

.a15 img{

margin-top: 2px;

}

.a16{

width: 250px;

height: 114px;

position: absolute;

top: 108px;

left: 35px;

z-index: 1;

}

.a16 p{

font-size: 20px;

}

.a16 li{

height: 20px;

margin-top: 8px;

font-size: 16px;

}

.a16 span{

width: 5px;

height: 5px;

background-color: #ff6200;

margin-top: 8px;

margin-right: 3px;

}

.a17{

width: 75px;

height: 25px;

background-color: #ff6200;

color: white;

line-height: 25px;

text-align: center;

font-size: 15px;

position: absolute;

top: 250px;

left: 35px;

z-index: 1;

}

.a18{

width: 330px;

height: 447px;

margin-top: -506px;

}

.a18 div{

width: 313px;

height: 219.5px;

}

.a19{

width: 200px;

height: 50px;

cursor: pointer;

border-bottom: 1px solid #e5e5e5;

}

.a20 p{

padding-top: 50px;

padding-left: 30px;

font-size: 18px;

}

.a20 li{

padding-left: 30px;

}

.a20 li{

height: 20px;

margin-top: 8px;

font-size: 15px;

}

.a20 span{

width: 5px;

height: 5px;

background-color: #ff6200;

margin-top: 8px;

margin-right: 3px;

}

.a21{

width: 75px;

height: 25px;

background-color: #ff6200;

color: white;

line-height: 25px;

text-align: center;

font-size: 15px;

position: absolute;

margin-top: 35px;

margin-left: 30px;

z-index: 1;

}

.a22{

margin-left: 220px;

}

.a22 img{

margin-top: -30px;

transition: 2s;

}

.a22 img:hover{

transform: scale(1.2);

}

.a23{

width: 200px;

height: 50px;

cursor: pointer;

}

三、js部分

$('.wd li').hover(function(){

$(this).css("border-bottom","2px solid #ffae00").siblings().css("border-bottom","1px solid #e5e5e5");

var i = $(this).index();

$('.d8').eq(i).show().siblings().hide();

});

欢迎各位大神指点留言 ,评论;

鼠标移入移出table图制作

猜你喜欢