我正在尝试为我的网站创建响应式功能。基本上我想要的是有很棒的字体图标用于导航，但是在计算机上如果将鼠标悬停在图标上，它就会变成一个单词。
我已经通过 CSS 尝试过，使用a:content:""进而a:hover:content:""
我以前从未尝试过这样的事情，如果有人能指出我必须做什么才能让它发挥作用，我将不胜感激。
这是一个JSFiddle http://jsfiddle.net/vassie98/evykes9q/1/
i {
color: #fff;
}
i {
padding: 0 10px;
}
ul {
list-style-type: none;
}
.nav ul {
margin: 0;
padding: 0;
position: absolute;
top: 0;
right: 0;
font-size: 0px;
}
.nav ul li {
font-size: 12pt;
display: inline-block;
padding: 15px;
transition: all 0.2s ease-in-out;
}
.nav ul li a {
font-family: FontAwesome;
color: #eee;
font-size: 22pt;
text-decoration: none;
}
.nav ul li:nth-child(1) {
background: #a3d39c;
}
.nav ul li:nth-child(2) {
background: #7accc8;
}
.nav ul li:nth-child(3) {
background: #4aaaa5;
}
.nav ul li:nth-child(4) {
background: #35404f;
}
.nav ul li a:before:nth-child(1) {
content: "\f015";
}
.nav ul li a:before:nth-child(2) {
content: "\f0f4";
}
.nav ul li a:before:nth-child(3) {
content: "\f121";
}
.nav ul li a:before:nth-child(4) {
content: "\f075";
}
.nav ul li a:hover:nth-child(1) {
content: "Home";
}
.nav ul li a:hover:nth-child(2) {
content: "About";
}
.nav ul li a:hover:nth-child(3) {
content: "Projects";
}
.nav ul li a:hover:nth-child(4) {
content: "Contact";
}
.nav a:hover {
color: #fff;
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="nav">
<ul>
<li><i class="icon fa fa-home fa-2x"></i><a href="index.html">Home</a></li>
<li><i class="icon fa fa-coffee fa-2x"></i><a href="about">About</a></li>
<li><i class="icon fa fa-code fa-2x"></i><a href="#projects">Projects</a></li>
<li><i class="icon fa fa-comment fa-2x"></i><a href="#contact">Contact</a></li>
</ul>
</div>
NOTE:我知道我的 HTML 和 CSS 文本是重叠的，我只想提供我已经尝试过的所有内容。
必须改变你的<li>结构有点像这样：
<li class="home">
<a href="index.html"><i class="icon fa fa-home fa-2x"></i><b>Home</b></a>
</li>
现场演示：http://jsfiddle.net/evykes9q/9/ http://jsfiddle.net/evykes9q/9/
.nav ul {
list-style: none;
margin: 0;
padding: 0;
position: absolute;
top: 0;
right: 0;
}
.nav li {
font-size:12pt;
display:block;
float: left;
height:90px;
width: 145px; /*new*/
text-align: center; /*new*/
transition: all 0.2s ease-in-out;
}
.nav .home {
background: #a3d39c;
}
.nav .about {
background: #7accc8;
}
.nav .projects {
background: #4aaaa5;
}
.nav .contact {
background: #35404f;
}
.nav li a {
font-family: FontAwesome;
color:#eee;
font-size:22pt;
text-decoration: none;
display: block;
padding:15px;
}
.nav li i {
color:#fff;
padding:0 10px;
}
.nav li b {
padding: 15px 0;
display: none;
}
.nav a:hover {
color: #fff;
}
.nav a:hover i {
display: none;
}
.nav a:hover b {
display: block;
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="nav">
<ul>
<li class="home">
<a href="index.html"><i class="icon fa fa-home fa-2x"></i><b>Home</b></a>
</li>
<li class="about">
<a href="about"><i class="icon fa fa-coffee fa-2x"></i><b>About</b></a>
</li>
<li class="projects">
<a href="#projects"><i class="icon fa fa-code fa-2x"></i><b>Projects</b></a>
</li>
<li class="contact">
<a href="#contact"><i class="icon fa fa-comment fa-2x"></i><b>Contact</b></a>
</li>
</ul>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
