纯css实现中、英文菜单栏内容变换

男孩子小杨

已于 2024-12-31 18:11:09 修改

阅读量1.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： css、css3 文章标签： css菜单网页菜单栏内容切换 css菜单切换 css中英文菜单切换菜单栏切换

于 2019-02-13 16:00:58 首次发布

本文链接：https://blog.csdn.net/qq_43495629/article/details/87186845

css、css3 专栏收录该内容

8 篇文章

订阅专栏

这篇博客介绍了如何仅使用CSS实现中、英文菜单栏内容的切换。通过改变元素的margin值，实现了菜单栏在鼠标悬停时的内容切换。文章提供了Demo效果展示，并附带了Html和Css代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

纯css实现中、英文菜单栏内容变换

1.实现思路 ( 超级简单 )：

通过改变margin值即可

a:hover{
	background-color:purple;
	color:#FFF;
	margin-top:-30px;
}

2.查看Demo效果:

整体效果：
hover后：

3.Html代码如下:

	<div>
		<ul>
			<li><a href="#"><span>CF</span><span>穿越火线</span></a></li>
			<li><a href="#"><span>DNF</span><span>地下城与勇士</span></a></li>
			<li><a href="#"><span>LOL</span><span>英雄联盟</span></a></li>
			<li><a href="#"><span>CJ</span><span>绝地求生</span></a></li>
		</ul>
	</div>

4.css代码如下:

	*{
		margin:0;
		padding:0;
	}
	
	div{
		width:400px;
		height:30px;
		margin:60px auto;
	}

	a{
		display:block;
		text-decoration:none;
		color:blue;
		font-size:14px;
	}

	ul{
		list-style:none;
		width:100%;
		height:100%;
		overflow:hidden;
		background-color:#ccc;
		box-shadow:0 0 2px black;
	}

	li{
		float:left;
		width:100px;
		line-height:30px;
	}

	span{
		display:block;
		text-align:center;
		height:30px;
	}

	a:hover{
		background-color:purple;
		color:#FFF;
		margin-top:-30px;
	}

如遇错误的地方，还请指正。