CSS小案例5：实现导航栏在鼠标滑上去时导航栏的字由英文变为中文的特效

最新推荐文章于 2022-11-20 15:39:57 发布

小佬呀

最新推荐文章于 2022-11-20 15:39:57 发布

阅读量677

点赞数 1

分类专栏： HTML 文章标签：导航栏字体英文变中文导航栏特效

本文链接：https://blog.csdn.net/qq_36722545/article/details/96905459

版权

HTML 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

在这里插入图片描述
在每个导航栏里放置两个标签，分别存放中文和英文

<li><a href="#"><span>首页</span><i>index</i></a></li>

初始状态英文显示，将span的属性设为display：none，即中文不显示；
鼠标滑过时，将span设置display：inline；将中文显示出来；

完整代码

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
	*{
		margin: 0px;
		padding: 0px;
	}
	li{
		list-style: none;
	}
	i{
		font-style: normal;
	}
	a{
		text-decoration: none;
		color: #333;
	}

	.nav{
		width: 1000px;
		height: 20px;
		border-bottom: 8px solid #f60;
		margin: 0 auto;
	}
	.nav li{
		
			width: 80px;
			line-height: 20px;
			background: #eee;
			text-align: center;
			float: left;
		    margin-left: 1px;
	}
	.nav li a{
		background: #ff0;
		display: block;/*将a标签转换成块级元素，这样a标签的大小和li大小一样*/
	}
	.nav span{
		display: none;
	}
	.nav a:hover span{
		display: inline;
	}
	.nav li:hover i{
		display: none;
	}
	.nav a:hover{
		background: #f60; color: #fff;
	}
	.
	
	</style>
</head>
<body>
    <ul class="nav">
    	<li><a href="#"><span>首页</span><i>index</i></a></li>
    	<li><a href="#"><span>博客</span><i>blog</i></a></li>
    	<li><a href="#"><span>首页</span><i>index</i></a></li>
    	<li><a href="#"><span>首页</span><i>index</i></a></li>
    	<li><a href="#"><span>首页</span><i>index</i></a></li>
    </ul>
</body>
</html>

小佬呀

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
CSS小案例5：实现导航栏在鼠标滑上去时导航栏的字由英文变为中文的特效

在每个导航栏里放置两个标签，分别存放中文和英文<li><a href="#"><span>首页</span><i>index</i></a></li>初始状态英文显示，将span的属性设为display：none，即中文不显示；鼠标滑过时，将span设置display：inline；将中文...
复制链接

扫一扫