鼠标移入移出table图制作
实现效果: 鼠标移到汇款支付时候 下边框变成橙色下拉框变化, 移动到融e购时候下半框变成橙色 下拉框变化;
一、html部分;
<div class="f72">
<div class="a14 cl">
<ul class="wd">
<li class="hhdd" style="border-bottom:2px solid #ffae00;">
<p>融e购</p>
</li>
<li class="hhdd">
<p>汇款支付</p>
</li>
<li class="hhdd">
<p>消费旅游</p>
</li>
<li class="hhdd">
<p>留学服务</p>
</li>
<li class="hhdd">
<p>移动金融</p>
</li>
<li class="hhdd">
<p>个人贷款</p>
</li>
</ul>
<div class="ffxl">
<div class="d8" style="display: block;">
<div class="lbg cl">
<div class="a15 fl">
<a href=""><img src="img/bljr_1.jpg120101.jpg" alt=""></a>
<div class="a16 cl">
<p>扶贫专区</p>
<li><span class="fl"></span>
<d>精选品质好物</d>
</li>
<li><span class="fl"></span>
<d>共创美好生活</d>
</li>
</div>
<div class="a17">了解详细</div>
</div>
</div>
<div class="a18 cl fr">
<div class="a19 cl">
<div class="a20">
<p>e购超市</p>
<li><span class="fl"></span>
<d>品类齐全,轻松购物</d>
</li>
<li><span class="fl"></span>
<d>每日秒杀大放价</d>
</li>
<d class="a21">了解详细</d>
<d class="a22"><img src="img/bljr_3.png1203.png" alt=""></d>
</div>
</div>
<div class="a23 cl">
<div class="a20">
<p>全球优品</p>
<li><span class="fl"></span>
<d>品类齐全,轻松购物</d>
</li>
<li><span class="fl"></span>
<d>每日秒杀大放价</d>
</li>
<d class="a21">了解详细</d>
<d class="a22"><img src="img/bljr_2.png1204.png" alt=""></d>
</div>
</div>
</div>
</div>
<div class="d8" style="display: none;">
<div class="lbg cl">
<div class="a15 fl">
<a href=""><img src="img/bljr_img2.jpg1205.jpg" alt=""></a>
<div class="a16 cl">
<p>工银e支付</p>
<li><span class="fl"></span>
<d>任选多种认证方式</d>
</li>
<li><span class="fl"></span>
<d>小额支付免密</d>
</li>
</div>
<div class="a17">立即体验</div>
</div>
</div>
<div class="a18 cl fr">
<div class="a19 cl">
<div class="a20">
<p>跨境汇款</p>
<li><span class="fl"></span>
<d>7*24小时随时随地轻松汇</d>
</li>
<li><span class="fl"></span>
<d>支持网上预约</d>
</li>
<d class="a21">立即体验</d>
<d class="a22"><img src="img/kuajinghuikuan.png1206.png" alt=""></d>
</div>
</div>
<div class="a23 cl">
<div class="a20">
<p>余额变动提醒</p>
<li><span class="fl"></span>
<d>账户余额适时变动掌握</d>
</li>
<li><span class="fl"></span>
<d>包年享八三折优惠</d>
</li>
<d class="a21">立即体验</d>
<d class="a22"><img src="img/tu2019.gif1207.gif" alt=""></d>
</div>
</div>
</div>
</div>
<div class="d8" style="display: none;">
<div class="lbg cl">
<div class="a15 fl">
<a href=""><img src="img/bljr_img.jpg1208.jpg" alt=""></a>
<div class="a16 cl">
<p>途牛信用卡</p>
<li><span class="fl"></span>
<d>每季度至少4条工行专属特惠线路</d>
</li>
<li><span class="fl"></span>
<d>途牛产品98折</d>
</li>
</div>
<div class="a17">立即申请</div>
</div>
</div>
<div class="a18 cl fr">
<div class="a19 cl">
<div class="a20">
<p>工银故宫联名信用卡</p>
<li><span class="fl"></span>
<d>限时免年费</d>
</li>
<li><span class="fl"></span>
<d>故宫图书,文创产品9折优惠</d>
</li>
<d class="a21">立即申请</d>
<d class="a22"><img src="img/thing3.png1209.png" alt=""></d>
</div>
</div>
<div class="a23 cl">
<div class="a20">
<p>工银生肖信用卡</p>
<li><span class="fl"></span>
<d>中国节.中国礼</d>
</li>
<li><span class="fl"></span>
<d>绑卡消费首笔免单</d>
</li>
<d class="a21">立即申请</d>
<d class="a22"><img src="img/sxk.jpg1210.jpg" alt=""></d>
</div>
</div>
</div>
</div>
<div class="d8" style="display: none;">
<div class="lbg cl">
<div class="a15 fl">
<a href=""><img src="img/bljr_img3.jpg1211.jpg" alt=""></a>
<div class="a16 cl">
<p>工银速汇</p>
<li><span class="fl"></span>
<d>多币种,多地区</d>
</li>
<li><span class="fl"></span>
<d>汇款速度快</d>
</li>
</div>
<div class="a17">立即申请</div>
</div>
</div>
<div class="a18 cl fr">
<div class="a19 cl">
<div class="a20">
<p>出国金融卡</p>
<li><span class="fl"></span>
<d>境外取现免手续费</d>
</li>
<li><span class="fl"></span>
<d>免收卡年费</d>
</li>
<d class="a21">立即申请</d>
<d class="a22"><img src="img/thing7.jpg1212.jpg" alt=""></d>
</div>
</div>
<div class="a23 cl">
<div class="a20">
<p>个人资信证明</p>
<li><span class="fl"></span>
<d>可信度高,说服力强</d>
</li>
<d class="a21">立即申请</d>
<d class="a22"><img src="img/gerenzixinzhengming.png1213.png" alt=""></d>
</div>
</div>
</div>
</div>
<div class="d8" style="display: none;">
<div class="lbg cl">
<div class="a15 fl">
<a href=""><img src="img/bljr_img4.jpg1214.jpg" alt=""></a>
<div class="a16 cl">
<p>融e行手机银行</p>
<li><span class="fl"></span>
<d>随身随行,融e行</d>
</li>
<li><span class="fl"></span>
<d>放在兜里的手机营业厅</d>
</li>
</div>
<div class="a17">立即体验</div>
</div>
</div>
<div class="a18 cl fr">
<div class="a19 cl">
<div class="a20">
<p>融e联</p>
<li><span class="fl"></span>
<d>免费余额提醒</d>
</li>
<li><span class="fl"></span>
<d>贴心服务</d>
</li>
<d class="a21">立即体验</d>
<d class="a22"><img src="img/thing9.png1215.png" alt=""></d>
</div>
</div>
<div class="a23 cl">
<div class="a20">
<p>微信银行</p>
<li><span class="fl"></span>
<d>轻松查询账户信息</d>
</li>
<li><span class="fl"></span>
<d>随时获取金融咨询</d>
</li>
<d class="a21">立即体验</d>
<d class="a22"><img src="img/sxk.jpg1210.jpg" alt=""></d>
</div>
</div>
</div>
</div>
<div class="d8" style="display: none;">
<div class="lbg cl">
<div class="a15 fl">
<a href=""><img src="img/bljr_img5.jpg1216.jpg" alt=""></a>
<div class="a16 cl">
<p>融e借</p>
<li><span class="fl"></span>
<d>无抵押无担保</d>
</li>
<li><span class="fl"></span>
<d>按天数计息,利率差异化定价</d>
</li>
</div>
<div class="a17">立即申请</div>
</div>
</div>
<div class="a18 cl fr">
<div class="a19 cl">
<div class="a20">
<p>住房公积金贷款</p>
<li><span class="fl"></span>
<d>利率更优惠</d>
</li>
<li><span class="fl"></span>
<d>组合融资更灵活</d>
</li>
<d class="a21">立即申请</d>
<d class="a22"><img src="img/zhufanggongjijindaikuan.png1217.png" alt=""></d>
</div>
</div>
<div class="a23 cl">
<div class="a20">
<p>自用车贷款</p>
<li><span class="fl"></span>
<d>可贷车辆市价80%</d>
</li>
<li><span class="fl"></span>
<d>可贷5年</d>
</li>
<d class="a21">立即申请</d>
<d class="a22"><img src="img/thing12.png1218.png" alt=""></d>
</div>
</div>
</div>
</div>
</div>
</div>
</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();
});
欢迎各位大神指点留言 ,评论;
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾（3.3-3.9）
· Vue3状态管理终极指南：Pinia保姆级教程