Question

我很难弄清楚如何让Facebook图标像Twitter和Instagram图标一样发光。围绕Facebook字体的边框会发光并改变颜色，但不会改变图标本身。

这就是我在HTML中使用字体真棒图标的方式：

GHCi> y = Foo { baz = "glub" }

<interactive>:51:5: error:
    * Constructor `Foo' does not have the required strict field(s): bar
    * In the expression: Foo {baz = "glub"}
      In an equation for `y': y = Foo {baz = "glub"}
GHCi> y

<interactive>:53:1: error: Variable not in scope: y

.wrapper ul {
  list-style: none;
}

.wrapper ul li {
  width: 40px;
  height: 40px;
  line-height: 20px;
  margin: 20px;
  cursor: pointer;
  border-radius: 50%;
  border: 3px solid #D8E2DC;
  transition: all 0.5s ease;
  float: left;
}

.wrapper ul li .fab {
  font-family: FontAwesome;
  color: #D8E2DC;
  margin-top: 10px;
  padding: 0;
  transition: all 0.5s ease;
  font-size: 25px;
}

.wrapper ul li:hover.facebook {
  border: 5px solid #3b5998;
  box-shadow: 0 0 15px #3b5998;
  transition: all 0.5s ease;
}

.wrapper ul li:hover .fab-facebook-f {
  color: #3b5998;
  text-shadow: 0 0 15px #3b5998;
  transition: all 0.5s ease;
}

.wrapper ul li:hover.twitter {
  border: 5px solid #00aced;
  box-shadow: 0 0 15px #00aced;
  transition: all 0.5s ease;
}

.wrapper ul li:hover .fab-twitter {
  color: #00aced;
  text-shadow: 0 0 15px #00aced;
  transition: all 0.5s ease;
}

.wrapper ul li:hover.instagram {
  border: 5px solid #bc2a8d;
  box-shadow: 0 0 15px #bc2a8d;
  transition: all 0.5s ease;
}

.wrapper ul li:hover .fab-instagram {
  color: #bc2a8d;
  text-shadow: 0 0 15px #bc2a8d;
  transition: all 0.5s ease;
}

我真的需要帮助，我花了好几个小时试图解决它，我不明白。

Answer 1

你在这里拼错了班级名称：

.wrapper ul li:hover.facebook {
  border: 5px solid #3b5998;
  box-shadow: 0 0 15px #3b5998;
  transition: all 0.5s ease;
}

应该是：

.wrapper ul li:hover.Facebook {
  border: 5px solid #3b5998;
  box-shadow: 0 0 15px #3b5998;
  transition: all 0.5s ease;
}

在此预览：JSFiddle

Answer 2

您只需将css班级的名称更改为facebook而不是Facebook，请查看以下代码段：

.wrapper ul {
list-style: none;
}
.wrapper ul li {
width: 40px;
height: 40px;
line-height: 20px;
margin: 20px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #D8E2DC;
transition: all 0.5s ease;
float: left;
}
.wrapper ul li .fab {
font-family: FontAwesome;
color: #D8E2DC;
margin-top: 10px;
padding: 0;
transition: all 0.5s ease;
font-size: 25px;
}
.wrapper ul li:hover.facebook {
border: 5px solid #3b5998;
box-shadow: 0 0 15px #3b5998;
transition: all 0.5s ease;
}
.wrapper ul li:hover .fab-facebook-f {
color: #3b5998;
text-shadow: 0 0 15px #3b5998;
transition: all 0.5s ease;
}
.wrapper ul li:hover.twitter {
border: 5px solid #00aced;
box-shadow: 0 0 15px #00aced;
transition: all 0.5s ease;
}
.wrapper ul li:hover .fab-twitter {
color: #00aced;
text-shadow: 0 0 15px #00aced;
transition: all 0.5s ease;
}
.wrapper ul li:hover.instagram {
border: 5px solid #bc2a8d;
box-shadow: 0 0 15px #bc2a8d;
transition: all 0.5s ease;
}
.wrapper ul li:hover .fab-instagram {
color: #bc2a8d;
text-shadow: 0 0 15px #bc2a8d;
transition: all 0.5s ease;
}

<div class="wrapper">
<div class="S animated bounceInUp">
<ul>
<li class="facebook"><i class="fab fa-facebook-f" aria-hidden="true"></i></li>
<li class="twitter"><i class="fab fa-twitter" aria-hidden="true"></i></li>
<li class="instagram"><i class="fab fa-instagram" aria-hidden="true"></i></li>
</ul>
</div>
</div>

字体真棒图标的悬浮效果不起作用

2 个答案: