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>