您的位置：首页 > 其它

变换菜单

2016-05-13 00:00 239 查看

摘要: 当鼠标经过时，菜单切换成英文字样

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin: 0px;padding: 0px;list-style: none;text-decoration-line: none;}
#box{text-align: center;width: 600px;margin:20px auto;background-color: #ddd;border-bottom:3px solid red;}
#box li{display: inline-block;padding: 10px;}
#box li a:nth-child(2){display: none;}
#box li:hover a:nth-child(2){display: block;color: red;}
#box li:hover a:nth-child(1){display: none;}
</style>
</head>
<body>
<ul id="box" >
<li><a href="#">首页</a><a href="#">HOME</a></li>
<li><a href="#">男</a><a href="#">MEN</a></li>
<li><a href="#">女</a><a href="#">WOMEN</a></li>
</ul>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 菜单变换鼠标经过

相关文章推荐

新的分享

章节导航