小贝子编程

如何添加<i>代码链接？



我试着设计一些标签的样式，以获得一些好看的社交媒体按钮。

这是我当前的代码：

@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
/* General rule */
.dist {
  margin-left: 7px;
}
.button-big {
  font-size: 2em;
  width: 50px;
  text-align: center;
  padding: 0.2em 0em 0.2em 0em;
  display: inline-block;
}
/* Facebook class and animation */
.facebook {
  color: #3B5998;
  border: 1px solid #3B5998;
}
.facebook:hover {
  animation: facebookAnim 0.4s normal forwards linear;
  -webkit-animation: facebookAnim 0.4s normal forwards linear;
}
@keyframes facebookAnim {
  50% {
    background-color: #3B5998;
  }
  100% {
    background-color: #3B5998;
    border: 1px solid #3B5998;
    color: #fff;
  }
}
@-webkit-keyframes facebookAnim {
  50% {
    background-color: #3B5998;
  }
  100% {
    background-color: #3B5998;
    border: 1px solid #3B5998;
    color: #fff;
  }
}
/* YouTube class and animation */
.youtube {
  color: #bb0000;
  border: 1px solid #bb0000;
}
.youtube:hover {
  animation: youtubeAnim 0.4s normal forwards linear;
  -webkit-animation: youtubeAnim 0.4s normal forwards linear;
}
@keyframes youtubeAnim {
  50% {
    background-color: #bb0000;
  }
  100% {
    background-color: #bb0000;
    border: 1px solid #bb0000;
    color: #fff;
  }
}
@-webkit-keyframes youtubeAnim {
  50% {
    background-color: #bb0000;
  }
  100% {
    background-color: #bb0000;
    border: 1px solid #bb0000;
    color: #fff;
  }
}
/* Instagram class and animation */
.instagram {
  color: #125688;
  border: 1px solid #125688;
}
.instagram:hover {
  animation: instaAnim 0.4s normal forwards linear;
  -webkit-animation: instaAnim 0.4s normal forwards linear;
}
@-webkit-keyframes instaAnim {
  50% {
    background-color: #125688;
  }
  100% {
    background-color: #125688;
    border: 1px solid #125688;
    color: #fff;
  }
}
@keyframes instaAnim {
  50% {
    background-color: #125688;
  }
  100% {
    background-color: #125688;
    border: 1px solid #125688;
    color: #fff;
  }
}
/* link style */
.facebook a {
  color: #3B5998;
}
.youtube a {
  color: #bb0000;
}
.instagram a {
  color: #125688;
}
.facebook a:hover {
  color: #fff;
}
.youtube a:hover {
  color: #fff;
}
.instagram a:hover {
  color: #fff;
}
<div class="facebook button-big">
  <a href="#"><i class="fa fa-facebook"></i></a>
</div>
<div class="youtube button-big dist">
  <a href="#"><i class="fa fa-youtube"></i></a>
</div>
<div class="instagram button-big dist">
  <a href="#"><i class="fa fa-instagram"></i></a>
</div>

问题是链接只是在图标上，所以当我把按钮悬停在外面一点时，图标是旧颜色的样式，而不是白色。我希望你明白我的意思，请看一看。如何以最佳方式解决此问题？

将div封装在a标记中。为a标记添加一些样式。

@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
/* General rule */
a {
    text-decoration: none;
}
.dist {
  margin-left: 7px;
}
.button-big {
  font-size: 2em;
  width: 50px;
  text-align: center;
  padding: 0.2em 0em 0.2em 0em;
  display: inline-block;
}
/* Facebook class and animation */
.facebook {
  color: #3B5998;
  border: 1px solid #3B5998;
}
.facebook:hover {
  animation: facebookAnim 0.4s normal forwards linear;
  -webkit-animation: facebookAnim 0.4s normal forwards linear;
}
@keyframes facebookAnim {
  50% {
    background-color: #3B5998;
  }
  100% {
    background-color: #3B5998;
    border: 1px solid #3B5998;
    color: #fff;
  }
}
@-webkit-keyframes facebookAnim {
  50% {
    background-color: #3B5998;
  }
  100% {
    background-color: #3B5998;
    border: 1px solid #3B5998;
    color: #fff;
  }
}
/* YouTube class and animation */
.youtube {
  color: #bb0000;
  border: 1px solid #bb0000;
}
.youtube:hover {
  animation: youtubeAnim 0.4s normal forwards linear;
  -webkit-animation: youtubeAnim 0.4s normal forwards linear;
}
@keyframes youtubeAnim {
  50% {
    background-color: #bb0000;
  }
  100% {
    background-color: #bb0000;
    border: 1px solid #bb0000;
    color: #fff;
  }
}
@-webkit-keyframes youtubeAnim {
  50% {
    background-color: #bb0000;
  }
  100% {
    background-color: #bb0000;
    border: 1px solid #bb0000;
    color: #fff;
  }
}
/* Instagram class and animation */
.instagram {
  color: #125688;
  border: 1px solid #125688;
}
.instagram:hover {
  animation: instaAnim 0.4s normal forwards linear;
  -webkit-animation: instaAnim 0.4s normal forwards linear;
}
@-webkit-keyframes instaAnim {
  50% {
    background-color: #125688;
  }
  100% {
    background-color: #125688;
    border: 1px solid #125688;
    color: #fff;
  }
}
@keyframes instaAnim {
  50% {
    background-color: #125688;
  }
  100% {
    background-color: #125688;
    border: 1px solid #125688;
    color: #fff;
  }
}
/* link style */
.facebook a {
  color: #3B5998;
}
.youtube a {
  color: #bb0000;
}
.instagram a {
  color: #125688;
}
.facebook a:hover {
  color: #fff;
}
.youtube a:hover {
  color: #fff;
}
.instagram a:hover {
  color: #fff;
}
<a href="#">
	<div class="facebook button-big">
		<i class="fa fa-facebook"></i>
	</div>
</a>
<a href="#">
	<div class="youtube button-big dist">
		<i class="fa fa-youtube"></i>
	</div>
</a>
<a href="#">
	<div class="instagram button-big dist">
		<i class="fa fa-instagram"></i>
	</div>
</a>

另一个解决方案是在悬停按钮时更改链接颜色，如下所示：

.facebook:hover a {
  color: #fff;
}
.youtube:hover a {
  color: #fff;
}
.instagram:hover a {
  color: #fff;
}

完整片段：

@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
/* General rule */
.dist {
  margin-left: 7px;
}
.button-big {
  font-size: 2em;
  width: 50px;
  text-align: center;
  padding: 0.2em 0em 0.2em 0em;
  display: inline-block;
}
/* Facebook class and animation */
.facebook {
  color: #3B5998;
  border: 1px solid #3B5998;
}
.facebook:hover {
  animation: facebookAnim 0.4s normal forwards linear;
  -webkit-animation: facebookAnim 0.4s normal forwards linear;
}
@keyframes facebookAnim {
  50% {
    background-color: #3B5998;
  }
  100% {
    background-color: #3B5998;
    border: 1px solid #3B5998;
    color: #fff;
  }
}
@-webkit-keyframes facebookAnim {
  50% {
    background-color: #3B5998;
  }
  100% {
    background-color: #3B5998;
    border: 1px solid #3B5998;
    color: #fff;
  }
}
/* YouTube class and animation */
.youtube {
  color: #bb0000;
  border: 1px solid #bb0000;
}
.youtube:hover {
  animation: youtubeAnim 0.4s normal forwards linear;
  -webkit-animation: youtubeAnim 0.4s normal forwards linear;
}
@keyframes youtubeAnim {
  50% {
    background-color: #bb0000;
  }
  100% {
    background-color: #bb0000;
    border: 1px solid #bb0000;
    color: #fff;
  }
}
@-webkit-keyframes youtubeAnim {
  50% {
    background-color: #bb0000;
  }
  100% {
    background-color: #bb0000;
    border: 1px solid #bb0000;
    color: #fff;
  }
}
/* Instagram class and animation */
.instagram {
  color: #125688;
  border: 1px solid #125688;
}
.instagram:hover {
  animation: instaAnim 0.4s normal forwards linear;
  -webkit-animation: instaAnim 0.4s normal forwards linear;
}
@-webkit-keyframes instaAnim {
  50% {
    background-color: #125688;
  }
  100% {
    background-color: #125688;
    border: 1px solid #125688;
    color: #fff;
  }
}
@keyframes instaAnim {
  50% {
    background-color: #125688;
  }
  100% {
    background-color: #125688;
    border: 1px solid #125688;
    color: #fff;
  }
}
/* link style */
.facebook a {
  color: #3B5998;
}
.youtube a {
  color: #bb0000;
}
.instagram a {
  color: #125688;
}
.facebook:hover a {
  color: #fff;
}
.youtube:hover a {
  color: #fff;
}
.instagram:hover a {
  color: #fff;
}
<div class="facebook button-big">
  <a href="#"><i class="fa fa-facebook"></i></a>
</div>
<div class="youtube button-big dist">
  <a href="#"><i class="fa fa-youtube"></i></a>
</div>
<div class="instagram button-big dist">
  <a href="#"><i class="fa fa-instagram"></i></a>
</div>

这是可能的。

在你的css中试试这个代码：

.button-big:hover a i {
  color: #fff;
  }

作为快速修复，您可以直接继承animation:

.button-big a , a i {
 animation:inherit;
  }


@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
/* General rule */
.dist {
  margin-left: 7px;
}
.button-big {
  font-size: 2em;
  width: 50px;
  text-align: center;
  padding: 0.2em 0em 0.2em 0em;
  display: inline-block;
}
/* Facebook class and animation */
.facebook {
  color: #3B5998;
  border: 1px solid #3B5998;
}
.facebook:hover {
  animation: facebookAnim 0.4s normal forwards linear;
  -webkit-animation: facebookAnim 0.4s normal forwards linear;
}
@keyframes facebookAnim {
  50% {
    background-color: #3B5998;
  }
  100% {
    background-color: #3B5998;
    border: 1px solid #3B5998;
    color: #fff;
  }
}
@-webkit-keyframes facebookAnim {
  50% {
    background-color: #3B5998;
  }
  100% {
    background-color: #3B5998;
    border: 1px solid #3B5998;
    color: #fff;
  }
}
/* YouTube class and animation */
.youtube {
  color: #bb0000;
  border: 1px solid #bb0000;
}
.youtube:hover {
  animation: youtubeAnim 0.4s normal forwards linear;
  -webkit-animation: youtubeAnim 0.4s normal forwards linear;
}
@keyframes youtubeAnim {
  50% {
    background-color: #bb0000;
  }
  100% {
    background-color: #bb0000;
    border: 1px solid #bb0000;
    color: #fff;
  }
}
@-webkit-keyframes youtubeAnim {
  50% {
    background-color: #bb0000;
  }
  100% {
    background-color: #bb0000;
    border: 1px solid #bb0000;
    color: #fff;
  }
}
/* Instagram class and animation */
.instagram {
  color: #125688;
  border: 1px solid #125688;
}
.instagram:hover {
  animation: instaAnim 0.4s normal forwards linear;
  -webkit-animation: instaAnim 0.4s normal forwards linear;
}
@-webkit-keyframes instaAnim {
  50% {
    background-color: #125688;
  }
  100% {
    background-color: #125688;
    border: 1px solid #125688;
    color: #fff;
  }
}
@keyframes instaAnim {
  50% {
    background-color: #125688;
  }
  100% {
    background-color: #125688;
    border: 1px solid #125688;
    color: #fff;
  }
}
/* link style */
.facebook a {
  color: #3B5998;
}
.youtube a {
  color: #bb0000;
}
.instagram a {
  color: #125688;
}
.facebook a:hover {
  color: #fff;
}
.youtube a:hover {
  color: #fff;
}
.instagram a:hover {
  color: #fff;
}
.button-big a , a i {
 animation:inherit;
  }
<div class="facebook button-big">
  <a href="#"><i class="fa fa-facebook"></i></a>
</div>
<div class="youtube button-big dist">
  <a href="#"><i class="fa fa-youtube"></i></a>
</div>
<div class="instagram button-big dist">
  <a href="#"><i class="fa fa-instagram"></i></a>
</div>

或彩色

.button-big a , a i {
 color:inherit;
  }


@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
/* General rule */
.dist {
  margin-left: 7px;
}
.button-big {
  font-size: 2em;
  width: 50px;
  text-align: center;
  padding: 0.2em 0em 0.2em 0em;
  display: inline-block;
}
/* Facebook class and animation */
.facebook {
  color: #3B5998;
  border: 1px solid #3B5998;
}
.facebook:hover {
  animation: facebookAnim 0.4s normal forwards linear;
  -webkit-animation: facebookAnim 0.4s normal forwards linear;
}
@keyframes facebookAnim {
  50% {
    background-color: #3B5998;
  }
  100% {
    background-color: #3B5998;
    border: 1px solid #3B5998;
    color: #fff;
  }
}
@-webkit-keyframes facebookAnim {
  50% {
    background-color: #3B5998;
  }
  100% {
    background-color: #3B5998;
    border: 1px solid #3B5998;
    color: #fff;
  }
}
/* YouTube class and animation */
.youtube {
  color: #bb0000;
  border: 1px solid #bb0000;
}
.youtube:hover {
  animation: youtubeAnim 0.4s normal forwards linear;
  -webkit-animation: youtubeAnim 0.4s normal forwards linear;
}
@keyframes youtubeAnim {
  50% {
    background-color: #bb0000;
  }
  100% {
    background-color: #bb0000;
    border: 1px solid #bb0000;
    color: #fff;
  }
}
@-webkit-keyframes youtubeAnim {
  50% {
    background-color: #bb0000;
  }
  100% {
    background-color: #bb0000;
    border: 1px solid #bb0000;
    color: #fff;
  }
}
/* Instagram class and animation */
.instagram {
  color: #125688;
  border: 1px solid #125688;
}
.instagram:hover {
  animation: instaAnim 0.4s normal forwards linear;
  -webkit-animation: instaAnim 0.4s normal forwards linear;
}
@-webkit-keyframes instaAnim {
  50% {
    background-color: #125688;
  }
  100% {
    background-color: #125688;
    border: 1px solid #125688;
    color: #fff;
  }
}
@keyframes instaAnim {
  50% {
    background-color: #125688;
  }
  100% {
    background-color: #125688;
    border: 1px solid #125688;
    color: #fff;
  }
}
/* link style */
.facebook a {
  color: #3B5998;
}
.youtube a {
  color: #bb0000;
}
.instagram a {
  color: #125688;
}
.facebook a:hover {
  color: #fff;
}
.youtube a:hover {
  color: #fff;
}
.instagram a:hover {
  color: #fff;
}
.button-big a , a i {
 color:inherit;
  }
<div class="facebook button-big">
  <a href="#"><i class="fa fa-facebook"></i></a>
</div>
<div class="youtube button-big dist">
  <a href="#"><i class="fa fa-youtube"></i></a>
</div>
<div class="instagram button-big dist">
  <a href="#"><i class="fa fa-instagram"></i></a>
</div>

相关内容

  • 没有找到相关文章

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium