中英文切换导航.png
需求：在鼠标移动到导航栏悬浮时，将原本是英文的导航标题变成中文。
知识点：display:none和block之间的应用
<ul>
<li><a href="">
<i>HOME</i>
<b>首页</b>
</a></li>
<li><a href="">
<i>HOME</i>
<b>首页</b>
</a></li>
<li><a href="">
<i>HOME</i>
<b>首页</b>
</a></li>
<li><a href="" style="border-right: none;">
<i>HOME</i>
<b>首页</b>
</a></li>
</ul>
/* 清除浏览器的默认间距 */
*{
margin: 0;
padding: 0;
}
ul {
width: 400px;
height: 50px;
margin: 50px auto;
border: 1px solid #000;
}
li {
/* 为了解决IE低版本的阶梯bug，在高版本浏览器使用中可以省略 */
float: left;
}
a {
float: left;
/* float不仅可以转换为行内块元素设置宽高,还可以改变水平方向布局 */
width: 100px;
height: 50px;
border-right: 1px dashed #000;
color: #000;
box-sizing: border-box;
text-align: center;
line-height: 50px;
}
/* 初始状态：英文显示，中文隐藏 */
b {
display: none;
}
/* 鼠标状态 */
a:hover i {
display: none;
}
a:hover b {
display: block;
}
a:hover {
background: #000;
color: #fff;
}
注意：
因为需要实现英文和中文分别显示，所以中英文需要放置在不同的标签内部，并使用normal去除标签原有的特征属性。（所有的练习案例都需要去除浏览器默认间距）
/* 清除浏览器的默认间距 */
*{
margin: 0;
padding: 0;
}
/* 清除加粗标签的默认样式 */
b,strong{
font-weight: normal;
}
/* 清除倾斜标签的默认样式 */
i,em{
font-style: normal;
}
