06-[案例2]中英文切换导航的实现

中英文切换导航.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;
}