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

需求：在鼠标移动到导航栏悬浮时，将原本是英文的导航标题变成中文。

知识点：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;
}

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

CSS3干货28：妙用 transition 实现中英文切换导航
好久没写博客了,有...20多天了吧? 最近好忙,指导 10 个同学论文不说,写了2个市级申报书,还抽空指导了一组同学参加xx比赛(就一个清明节的时间准备,居然冲进了省部级赛场~,不得不佩服这帮同学之 ...
Flutter黑马头条项目开发(二.底部切换导航和新闻页面开发)
底部四个切换导航它分为首页,问答,视频和我的四大模块创建lib/home/home.dart首页文件,使用的是bottomNavigationBar组件,官网也有介绍它有一个onTap函数,这个 ...
vue使用element-ui开发的后台管理系统使用中英文切换多语言国际化方案步骤流程
公司后台管理系统需要使用多语言版本,本次记录使用i18n实现多语言切换的流程步骤: 1.安装工具包 npm install vue-i18n 2.在项目src目录下新建lang文件夹,目录结构如下: ...
腾讯视频首页导航栏【鼠标移动切换导航（静态数据）】
示意图提示该案例只是改变了导航,不涉及改变背景图片[后期会有->动态数据及背景图改变(利用js)] 代码 html <!DOCTYPE html> <html lang=& ...
Linux实操篇之常用基本命令二【文件操作命令续，实现中英文切换】
这里写目录标题写在前面 centos7 实现中英文切换 1. cat 1.1 基本语法 1.2 案例实操 2. more 2.1 基本语法与操作说明 2.2 案例实操输入 = 输入 :f 3. l ...
react基础06--react综合案例-电商网站导航
react基础06--react综合案例-电商网站导航 1 介绍 2 案例设计模块 2.1 分类导航数据模型设计 2.2 一级分类导航切换高亮效果 2.3 显示二级分类导航 2.4 路由跳转到二级导航 ...
ae中英文切换_AE技巧，AE CC软件如何切换中英文版
平时使用,中文界面更容易操作,但有时候需要切换成英文版使用,那AE怎么切换中英文界面呢?今天就来跟大家讲解一下切换语言界面的方法. 中文界面固然看着熟悉,对于入门来说也是非常有利的.但是,我们在学习过 ...
java 图片手动切换_JavaScript学习案例之手动切换轮播图片
javascript学习案例之手动切换轮播图片效果图: 思路: 1.先做界面 1.1制作按钮及点击触发事件 1.2引入一张图片 2.书写css 2.1跳转p盒子的布局(宽.高.边框线.水平居中.文字 ...
jenkins页面中英文切换配置
jenkins中英文切换配置 Jenkins--英文切换成中文更新了一下jenkins的war包, 结果启动后成英文的了,后来百度出解决方案: 原文地址:https://blog.csdn.net/ ...

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

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

最新文章

热门文章