如何实现中英双语导航栏?(所谓的中英双语导航栏就是导航栏显示的是中文(或英文)然后输入悬浮在其上的时候转成英文(或中文))
方法有很多,此次记录一种使用块级元素隐藏实现的中英文切换。
上代码:
HTML代码:
<div id="nav">
<ul>
<li>
<a href="sy04.html"><span>Home</span>首页</a>
</li>
<li>
<a href="sy04.html"><span>News</span>行业新闻</a>
</li>
<li>
<a href="sy04.html"><span>Product</span>产品</a>
</li>
<li>
<a href="sy04.html"><span>Order</span>产品订购</a>
</li>
<li>
<a href="sy04.html"><span>Technology</span>技术力量</a>
</li>
<li>
<a href="sy04.html"><span>Work</span>合作加盟</a>
</li>
</ul>
</div>
CSS代码:
#nav{
width: 750px;
margin: 50px auto;
border: 1px solid #ccc;
overflow:hidden;
}
#nav li{
width: 100px;
height: 22px;
line-height: 22px;
list-style-type: none;
float:left;
overflow: hidden;
text-align: center;
}
#nav a{
width: 100px;
float: left;
overflow: hidden;
}
a span{
display: block;
margin-top: -22px;
color: red;
}
#nav a:hover{
padding-top: 22px;
}
正常的效果:
当我们删除div、li、a中的overflow:hidden,效果:
是不是有点明目了
当a标签不加的overflow:hidden:
因为a标签只能显示一行,当不加"overflow:hidden"时,因为a标签中的span的属性display:block把英文部分变成了块级元素会换行,所以a标签中内容要显示两行,又因为span标签外边距上移22px所以a标签中就只剩下中文的一行了
span不上移:
span上移:
当a标签加上overflow:hidden:
因为a标签中的span被移出去了,所以会被加上的overflow:hidden隐藏掉。
当鼠标悬浮在上面时增加了内边距,故span标签又能显示:
当li标签再加上overflow:hidden:
悬浮增加了高度,且超过了li的高度,所以隐藏
当div标签加上overflow:hidden
之前因为没有加超出隐藏,ul标签中的两行只会选择隐藏的一行,也就是为什么div的框没有框住文字,加上超出隐藏,就能把整个ul包住。