html – 在悬停时更改带有文本的FontAwesome图标

概述我正在尝试为我的网站创建一个响应式功能.基本上我想要的是拥有用于导航的字体真棒图标,但是当你在计算机上将鼠标悬停在图标上时,它会变成一个单词. 我通过CSS尝试了它,使用：content：“”然后a：hover：content：“” 我之前从未尝试过类似的东西,如果有人能指出我必须做些什么才能让它发挥作用,我会很感激. 这是一个JSFiddle i { color: #fff;}i { 我正在尝试为我的网站创建一个响应式功能.基本上我想要的是拥有用于导航的字体真棒图标,但是当你在计算机上将鼠标悬停在图标上时,它会变成一个单词.

我通过CSS尝试了它,使用：content：“”然后a：hover：content：“”

我之前从未尝试过类似的东西,如果有人能指出我必须做些什么才能让它发挥作用,我会很感激.

这是一个JSFiddle

i {  color: #fff;}i {  padding: 0 10px;}ul {  @R_404_6818@-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 >  <ul>    <li><i ></i><a href="index.HTML">Home</a></li>    <li><i ></i><a href="about">About</a></li>    <li><i ></i><a href="#projects">Projects</a></li>    <li><i ></i><a href="#contact">Contact</a></li>  </ul></div>

注意：我知道我的HTML和CSS文本是重叠的,我只想提供我已经尝试过的所有内容.

解决方法 必须更改您的< li>结构一点点,像这样：

<li >    <a href="index.HTML"><i ></i><b>Home</b></a></li>

现场演示：http://jsfiddle.net/evykes9q/9/

.nav ul {    @R_404_6818@-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 >    <ul>        <li >        	<a href="index.HTML"><i ></i><b>Home</b></a>        </li>        <li >        	<a href="about"><i ></i><b>About</b></a>        </li>        <li >        	<a href="#projects"><i ></i><b>Projects</b></a>        </li>        <li >        	<a href="#contact"><i ></i><b>Contact</b></a>        </li>    </ul></div>

总结

以上是内存溢出为你收集整理的html – 在悬停时更改带有文本的FontAwesome图标全部内容，希望文章能够帮你解决html – 在悬停时更改带有文本的FontAwesome图标所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。