问题描述
我正在尝试为我的网站创建响应功能。基本上,我想要的是拥有用于导航的字体真棒图标,但是在计算机上,如果将鼠标悬停在该图标上,它将变成一个单词。
I'm trying to create a responsive feature to my website. Basicly what I want is to have font awesome icons for navigation, but when on computer if you hover the mouse over the icon, it changes into a word.
我已经通过CSS进行了尝试,先使用 a:content: ,然后使用 a:hover:content:
I've tried it via CSS, using a:content:"" and then a:hover:content:""
我以前从未尝试过这种方法,如果有人可以指出要使其正常工作我必须做些什么,我将不胜感激。
I have never tried something like this before and I'd appreciate it if anybody could point out what I have to do to get it working.
这里是
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>
注意:我知道我的HTML和CSS文本是重叠的,我只想提供我已经尝试过的所有内容。
NOTE: I know that my HTML and CSS text are overlapping, I just want to provide everything I've tried already.
推荐答案
必须稍微更改您的< li> 结构,例如:
Have to change your <li> structure a little bit, like this:
<li class="home"> <a href="index.html"><i class="icon fa fa-home fa-2x"></i><b>Home</b></a> </li>
实时演示:
.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>
这篇关于将悬停文本更改为FontAwesome图标的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!