js鼠标悬浮实现菜单栏

1、实现的效果图

2.html代码

< div class = "cm-classify-content clearfix" >

< div class = "cm-kind clearfix" >

< ul class = "tab" >

< li class = "li cur" > 社交网络 < i class = "fa fa-angle-right pull-right" ></ i ></ li >

< li class = "li" > 电子商务 < i class = "fa fa-angle-right pull-right" ></ i ></ li >

< li class = "li" > 生活服务 < i class = "fa fa-angle-right pull-right" ></ i ></ li >

< li class = "li" > 休闲旅游 < i class = "fa fa-angle-right pull-right" ></ i ></ li >

< li class = "li" > 金融基金 < i class = "fa fa-angle-right pull-right" ></ i ></ li >

< li class = "li" > 其他 < i class = "fa fa-angle-right pull-right" ></ i ></ li >

</ ul >

< div class = "classify-content" >

< div class = "con on" >

< span > 微信 </ span >

< span > | </ span >

< span > 贴吧 </ span >

< span > | </ span >

< span > 微博 </ span >

< span > | </ span >

< span > 论坛 </ span >

</ div >

< div class = "con" >

< span > 阿里巴巴 </ span >

< span > | </ span >

< span > 淘宝 </ span >

< span > | </ span >

< span > 京东 </ span >

</ div >

< div class = "con" >

< span > 大众点评 </ span >

< span > | </ span >

< span > 58 </ span >

< span > | </ span >

< span > 赶集 </ span >

</ div >

< div class = "con" >

< span > 影视数据 </ span >

< span > | </ span >

< span > 娱乐 </ span >

< span > | </ span >

< span > 机票 </ span >

</ div >

< div class = "con" >

< span > 企业信息 </ span >

< span > | </ span >

< span > 理财 </ span >

< span > | </ span >

< span > 股票 </ span >

</ div >

< div class = "con" >

< span > 工业制品 </ span >

< span > | </ span >

< span > 采购 </ span >

< span > | </ span >

< span > 咨询 </ span >

</ div >

</ div >

</ div >

</ div >

3.css代码

.cm-classify-content {

width : 680px ;

height : 300px ;

.cm-kind {

border-right : 1px solid white ;

height : 300px ;

.tab {

width : 170px ;

float : left ;

display : block ;

border : 1px solid black ;

margin : 0 ;

padding : 0 ;

li {

cursor : pointer ;

border-top : 1px solid rgba ( 154 , 210 , 237 , 0.4 );

border-left : 0 ;

font-size : 14px ;

display : block ;

color : gray ;

padding : 14.5px 15px 14.5px 25px ;

}

.cur {

background : rgba ( 0 , 0 , 0 , .075 );

}

}

.classify-content {

width : 500px ;

height : 300px ;

border : 1px solid gray ;

float : right ;

background-color : white ;

.on {

display : block ;

}

.con {

display : none ;

width : 90% ;

margin-left : 20px ;

span {

margin-left : 10px ;

cursor : pointer ;

}

}

}

}

}

4.js代码

< script src = "js/jquery.js" > < / script >

< script >

$ ( document ). ready ( function () {

$ ( ".cm-kind .tab li" ). hover ( function () {

// 获取相同class的集合

var m = document . getElementsByClassName ( "li" );

var n = document . getElementsByClassName ( "con" );

console . log ( "m" + m);

// 获取集合的索引

var index = $ ( ".li" ). index ( $ ( this ));

console . log (index);

// 添加和移除属性

$ ( ".tab li" ). eq ( $ ( this ). index ()). addClass ( "cur" ). siblings (). removeClass ( 'cur' );

// 对应部分的隐藏和显示

$ ( ".con" ). hide (). eq ( $ ( this ). index ()). show ();

});

});

< / script >