CSS 语言选择--2种语言选择如何做？
作者：互联网
看似简单的前端小功能，却弄不出来，您 我这就是新手呢？ 是不是？
目前代码，仅仅显示了一种英语。中文的如何显示呢？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景案例</title>
<style>
/* mcanguage 容器*/
/* 加了下划线，不能显示呢 problem1 */
.mclanguage {
width: 141px;
height: 70px;
/* background-color: blueviolet; */
line-height: 70px;
/* 背景图片默认平铺 */
background-image: url(../CSSLibrary/img/lcicon.png);
/* 背景不平铺 */
background-repeat: no-repeat;
background-position: left center;
/* problem2 背景图片尺寸改下显示，怎么修改？ */
/* 缩进文字 */
text-indent: 3em;
font-size: 17px;
/* 滑过提示 */
position: relative;
display: inline-block;
/* */
}
/* 文本语言提示 */
.mclanguage .language {
visibility: hidden;
width: 200px;
height: 100px;
background-color: rgb(131, 20, 20);
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
position: absolute;
z-index: 1;
display: none;
}
/* 文本语言提示 */
.mclanguage .language1 {
visibility: hidden;
width: 200px;
height: 100px;
background-color: rgb(131, 20, 20);
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
position: absolute;
z-index: 1;
display: none;
}
/* 鼠标滑过样式设置 */
.mclanguage:hover .language {
display: block;
visibility: visible;
}
/* 中文 */
.mclanguage:hover .language1 {
display: block;
visibility: visible;
}
.spandemo {
font-size: 17px;
/* vertical-align: middle; */
}
</style>
</head>
<body>
<!--
1
-->
<div class="mclanguage"> 选择语言
<span class="language"> English</span>
</div>
<!-- <div class="mclanguage"> 选择语言
<span class="language1"> 中文</span>
</div> -->
</body>
</html>效果
标签：20,--,height,color,background,mclanguage,语言选择,display,CSS 来源： https://blog.csdn.net/chenggong9527/article/details/122847036