利用CSS完成鼠标悬浮时中英文切换

最新推荐文章于 2022-11-03 12:10:03 发布

七里香777

最新推荐文章于 2022-11-03 12:10:03 发布

阅读量943

点赞数

分类专栏：笔记 # CSS 文章标签： css html

本文链接：https://blog.csdn.net/weixin_44286392/article/details/107787702

版权

笔记同时被 2 个专栏收录

45 篇文章 0 订阅

订阅专栏

CSS

15 篇文章 0 订阅

订阅专栏

效果：
刚开始时是中文菜单，
在这里插入图片描述

鼠标悬浮在某一项时，该项切换成英文且背景颜色改变。
在这里插入图片描述

源码：

<!doctype html>
<head>
	<style>
		*{padding:0px;margin:0px;}
		html{background:#abcdef;}
		div{margin:200px auto;width:80%;}
		ul{list-style:none;
			overflow:hidden;/*显示英文时，隐藏切换后的中文*/
		}
		ul li{float:left;border-bottom:8px solid #f00;}
		ul li a{background:#f90;
				display:block;
				line-height:40px;
				color:white;
				font-weight:bold;
				padding:0px 5px;
				margin:0px 1px;
				}
		ul li a span{display:none;}	
		ul li a:hover{background:#00f;
			margin-top:-40px;/*鼠标悬浮上去时，将中文向上移动40px，*/
		} 
		ul li a:hover span{display:block;}  
	 
		
	</style>
</head>
<body>
	<div>
	<ul>
		<li><a>学校简介<span>About hpu</span></a></li>
		<li><a>管理机构<span>Departments</span></a></li>
		<li><a>院系设置<span>School</span></a></li>
		<li><a>招生就业<span>Enrollment</span></a></li>
		<li><a>科学研究<span>Research</span></a></li>
	</ul>
	<div>
</body>

七里香777

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
利用CSS完成鼠标悬浮时中英文切换

效果：刚开始时是中文菜单，鼠标放上去时，中文切换成英文且样式改变。源码：<!doctype html><head> <style> *{padding:0px;margin:0px;} html{background:#abcdef;} div{margin:200px auto;width:80%;} ul{list-style:none; overflow:hidden;/*显示英文时，隐藏切换后的中文*/ } ul li
复制链接

扫一扫

专栏目录