:hover 选择器实现简单的导航栏效果
:hover 选择器
:hover 选择器用于选择鼠标指针浮动在上面的元素。
ps： :hover 选择器可用于所有元素，不只是链接。
一级导航栏效果
一般网页做导航栏都是有跳转效果的功能，所以一般li中都包含了a标签。
i标签里可以放小图标。
html代码
<div class="nav">
<ul class="nav_ul">
<li>
<a href="">首页 <i></i> </a>
</li>
<li>
<a href="">视频 <i></i> </a>
</li>
<li>
<a href="">小说 <i></i> </a>
</li>
<li>
<a href="">音乐 <i></i> </a>
</li>
<li>
<a href="">游戏 <i></i> </a>
</li>
<li>
<a href="">其他 <i></i> </a>
</li>
</ul>
</div>
css代码
*{
padding: 0;
margin:0;
}
li{
list-style: none;
}
a{
/*取消a标签下边的线*/
text-decoration: none;
}
.nav{
width: 300px;
margin: 30px auto;
}
.nav_ul li{
width: 150px;
line-height: 35px;
background-color: powderblue;
}
ul.nav_ul li a{
width: 100px;
line-height: 35px;
display: inline-block;
background-color: lavenderblush;
padding-left: 25px;
/*相对自己定位*/
position: relative;
}
/*根据ul找类名为nav_ul的ul下的i*/
ul.nav_ul i{
/*改为行内块元素*/
display: inline-block;
width: 20px;
height: 20px;
/*背景图片*/
background-image: url(img/shape.png);
/*背景图片不平铺*/
background-repeat: no-repeat;
/*绝对定位 相对于它最近的已有定位的父级元素定位*/
position: absolute;
right: 5px;
top: 11px;
}
/*li的hover效果*/
ul.nav_ul li:hover{
/*更换li的背景颜色*/
background-color: plum;
/*鼠标放上去变成小手*/
cursor: pointer;
}
/*li下的a标签的hover效果*/
ul.nav_ul li:hover a{
/*更换a标签的字体颜色*/
color: lightgreen;
}
/*li下的a标签的i的hover效果*/
ul.nav_ul li:hover a i{
/*更换背景图片*/
background-image: url(img/shape1.png);
}
hover之前的效果：
hover之后的效果：
注意： 这个放上去改变了li的背景 ，只是被a标签挡住了一部分。想改变一行的背景颜色的话，可以给a标签的宽高跟li的一样大。然后给a标签的hover改背景颜色。
效果如下
ps： 一般都在所有要改变元素的大盒子的hover中改变效果，如果不是，容易出现鼠标只有放在给hover的元素上才会出现对应的效果，没有整体性。
二级导航栏效果
简单的二级菜单
html代码
<div class="nav">
<ul class="nav_ul">
<li>
<a href="">首页 <i></i> </a>
</li>
<li>
<a href="">视频 <i></i> </a>
<!--二级菜单 start-->
<div class="second_menu">
<ol>
<li><a href="">长安十二时辰</a></li>
</ol>
</div>
<!--二级菜单 end-->
</li>
<li>
<a href="">小说 <i></i> </a>
<!--二级菜单 start-->
<div class="second_menu">
<ol>
<li><a href="">天官赐福</a></li>
<li><a href="">杀破狼</a></li>
<li><a href="">镇魂</a></li>
</ol>
</div>
<!--二级菜单 end-->
</li>
<li>
<a href="">音乐 <i></i></a>
<!--二级菜单 start-->
<div class="second_menu">
<ol>
<li><a href="">富士山下</a></li>
<li><a href="">夜空中最亮的星</a></li>
<li><a href="">不如不见</a></li>
<li><a href="">单车</a></li>
<li><a href="">陀飞轮</a></li>
</ol>
</div>
<!--二级菜单 end-->
</li>
<li>
<a href="">游戏 <i></i> </a>
<!--二级菜单 start-->
<div class="second_menu">
<ol>
<li><a href="">英雄联盟</a></li>
<li><a href="">4399</a></li>
<li><a href="">绝地求生</a></li>
</ol>
</div>
<!--二级菜单 end-->
</li>
<li>
<a href="">其他 <i></i> </a>
</li>
</ul>
</div>
css代码
*{
padding: 0;
margin:0;
}
li{
list-style: none;
}
a{
/*取消a标签下边的线*/
text-decoration: none;
}
.nav{
width: 300px;
margin: 30px auto;
}
.nav_ul li{
width: 150px;
line-height: 35px;
background-color: powderblue;
position: relative;
}
ul.nav_ul li a{
width: 150px;
line-height: 35px;
display: inline-block;
background-color: lavenderblush;
padding-left: 25px;
/*相对自己定位*/
position: relative;
}
/*根据ul找类名为nav_ul的ul下的i*/
ul.nav_ul i{
/*改为行内块元素*/
display: inline-block;
width: 20px;
height: 20px;
/*背景图片*/
background-image: url(img/shape.png);
/*背景图片不平铺*/
background-repeat: no-repeat;
/*绝对定位 相对于它最近的已有定位的父级元素定位*/
position: absolute;
right: 5px;
top: 11px;
}
/*li下的a标签的hover效果*/
ul.nav_ul li:hover a{
color: lightgreen;
background-color: plum;
}
/*li下的a标签的i的hover效果*/
ul.nav_ul li:hover a i{
background-image: url(img/shape1.png);
}
/*二级菜单显示*/
ul.nav_ul li:hover .second_menu{
display: block;
}
/*二级菜单*/
.second_menu{
width: 150px;
background-color: lightgoldenrodyellow;
/*根据一级菜单中它的父元素绝对定位*/
position: absolute;
left: 174px;
top: 0px;
/*隐藏*/
display: none;
}
.second_menu ul li{
width: 150px;
line-height: 35px;
}
.second_menu ol li a{
display: block;
background-color: lightgoldenrodyellow;
}
.second_menu ol li:hover a{
background-color: blanchedalmond;
}
hover之前效果
hover之后效果
ps
想把二级菜单放哪里就把它定位在哪里，直接改变他的定位代码就行了。
例子（定位到左边）
/*二级菜单*/
.second_menu{
width: 150px;
background-color: lightgoldenrodyellow;
/*根据一级菜单中它的父元素绝对定位*/
position: absolute;
/*改变这一句代码就ok了*/
right: 174px;
top: 0px;
/*隐藏*/
display: none;
}
效果
注意 二级菜单中的li可能会受到上面的样式影响，这是就会有优先级的问题。
