在做之前我们首先需要引入bootstrap和jquery
<script src="js/jquery/jquery.min.js"></script>
<link rel="stylesheet" href="css/bootstrap/css/bootstrap.min.css" >
<----------------HTML部分----------------->
<div style="position: relative;">
<div class="productsAsideCategory" cid="1" style="display: none">
<div class="row">
<a href="#nowhere">
大屏影院
</a>
<a href="#nowhere" >
周末
</a>
<a href="#nowhere" >
新品特惠
</a>
<a href="#nowhere">
32吋电视机
</a>
<a href="#nowhere" style="color: rgb(135, 206, 250);">
智能网络
</a>
<div class="seperator"></div>
</div>
<div class="row">
<a href="#nowhere">
USB高清解
</a>
<a href="#nowhere" style="color: rgb(135, 206, 250);">
芒果TV在线
</a>
<a href="#nowhere">
抢购价
</a>
<a href="#nowhere">
USB解码
</a>
<a href="#nowhere">
32英吋
</a>
<a href="#nowhere">
10核
</a>
<a href="#nowhere">
TCL品牌日
</a>
<div class="seperator"></div>
</div>
<div class="row ">
<a href="#nowhere">
不要赠品
</a>
<a href="#nowhere">
新品上市
</a>
<a href="#nowhere">
4K硬屏
</a>
<a href="#nowhere">
领100元券
</a>
<a href="#nowhere" style="color: rgb(135, 206, 250);">
智能高清
</a>
<a href="#nowhere">
8月,酷暑
</a>
<a href="#nowhere" style="color: rgb(135, 206, 250);">
8月大促
</a>
<a href="#nowhere">
天猫定制
</a>
<div class="seperator"></div>
</div>
<div class="row ">
<a href="#nowhere" style="color: rgb(135, 206, 250);">
智能操作系统
</a>
<a href="#nowhere">
金色外观
</a>
<a href="#nowhere">
三星屏幕
</a>
<a href="#nowhere">
客厅爆款
</a>
<a href="#nowhere">
八核配置
</a>
<a href="#nowhere">
限时特惠
</a>
<div class="seperator"></div>
</div>
<div class="row ">
<a href="#nowhere">
限时特惠
</a>
<a href="#nowhere">
热销爆款
</a>
<a href="#nowhere">
4K全高清
</a>
<a href="#nowhere" style="color: rgb(135, 206, 250);">
六核智能
</a>
<a href="#nowhere">
14核4K
</a>
<a href="#nowhere">
YUNOS
</a>
<a href="#nowhere" style="color: rgb(135, 206, 250);">
YUNOS
</a>
<a href="#nowhere">
64位处理器
</a>
<div class="seperator"></div>
</div>
<div class="row ">
<a href="#nowhere">
YUNOS
</a>
<a href="#nowhere">
微信电视
</a>
<a href="#nowhere">
4k超清
</a>
<a href="#nowhere"style="color: rgb(135, 206, 250);">
64位真4K
</a>
<a href="#nowhere">
10核机芯
</a>
<a href="#nowhere">
V字黑釉底座
</a>
<a href="#nowhere">
4K超清
</a>
<div class="seperator"></div>
</div>
<div class="row">
<a href="#nowhere">
64位14核
</a>
<a href="#nowhere">
海量影视
</a>
<a href="#nowhere">
人气爆款
</a>
<a href="#nowhere">
限时特惠
</a>
<a href="#nowhere">
真4K屏
</a>
<a href="#nowhere">
65吋巨屏
</a>
<a href="#nowhere" style="color: rgb(135, 206, 250);">
4K超清视界
</a>
<a href="#nowhere">
限时特惠
</a>
<div class="seperator"></div>
</div>
<div class="row ">
<a href="#nowhere">
55寸旗舰
</a>
<a href="#nowhere">
4K机皇
</a>
<a href="#nowhere">
曲面机皇
</a>
<a href="#nowhere" style="color: rgb(135, 206, 250);">
轻薄4K
</a>
<div class="seperator"></div>
</div>
</div>
</div>
<------------------------CSS部分----------------------------------->
.categoryMenu{
width: 200px;
height: 500px;
background-color: #e2e2e3;
margin-left: 70px;
position: absolute;
z-index: 1;
top: -500px;
}
.categoryMenu a{
color: #000;
}
.categoryMenu a:hover{
color: #2aabd2;
text-decoration: none;
}
.productsAsideCategory{
width: 800px;
height: 500px;
background-color: #fff;
margin-left: 270px;
display: none;
position:absolute;
z-index: 1;
top: -500px;
}
.productsAsideCategory .row{
margin: 20px 0px 0px 80px;
}
.productsAsideCategory .row .seperator{
margin-top: 19px;
border-bottom-style: dashed;
border-bottom-width: 1px;
border-bottom-color: #e7e7e7;
}
.productsAsideCategory a{
color: #999;
font-size: 14px;
margin: 8px;
}
.productsAsideCategory a:hover{
color: #C40000;
text-decoration: none;
}
.eachCategory{
line-height: 29px;
padding-left: 10px;
font-size: 14px;
}
.eachCategory span{
margin-right: 10px;
}
.eachCategory:hover{
background-color: #fff;
}
<--------------------------JS部分--------------------------->
<script>
/*整体思路
1.先把所有右侧产品列表隐藏
2.当鼠标移动到左侧菜单栏上时,右侧产品列表出现
3.当鼠标移出左侧菜单到右侧产品列表时,右侧产品列表依然存在,直到移出右侧产品列表消失。
*/
function showProductsAsideCategorys(cid){
$("div.eachCategory[cid="+cid+"]").css("background-color","white");
$("div.eachCategory[cid="+cid+"] a").css("color","#87CEFA");
$("div.productsAsideCategory[cid="+cid+"]").show();
}
function hideProductsAsideCategorys(cid){
$("div.eachCategory[cid="+cid+"]").css("background-color","#e2e2e3");
$("div.eachCategory[cid="+cid+"] a").css("color","#000");
$("div.productsAsideCategory[cid="+cid+"]").hide();
}
$(function(){
$("div.eachCategory").mouseenter(function(){
var cid = $(this).attr("cid");
showProductsAsideCategorys(cid);
});
$("div.eachCategory").mouseleave(function(){
var cid = $(this).attr("cid");
hideProductsAsideCategorys(cid);
});
$("div.productsAsideCategory").mouseenter(function(){
var cid = $(this).attr("cid");
showProductsAsideCategorys(cid);
});
$("div.productsAsideCategory").mouseleave(function(){
var cid = $(this).attr("cid");
hideProductsAsideCategorys(cid);
});
});
</script>