如何添加<i>标签的链接？

时间：2016-05-15 12:21:42

标签： html css hyperlink css-transitions

我尝试设置一些标签以获得一些好看的社交媒体按钮。

这是我目前的代码：

＆＃13;
＆＃13; 
sp['Status'] = sp['Status'].apply(lambda x: x='A' if x=='Done' else x='N')
                                                                     ^
SyntaxError: invalid syntax
＆＃13; 
@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;
}
＆＃13;
＆＃13;
＆＃13;

问题是链接只在图标上，所以当我将按钮悬停在外面时，图标是旧颜色的样式而不是白色。我希望你明白我的意思，请看看。 我怎样才能以最好的方式解决这个问题？

4 个答案:

答案 0 :(得分：1)

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

＆＃13;
＆＃13; 
@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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

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

.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>

答案 2 :(得分：0)

有可能。

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

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

答案 3 :(得分：0)

作为快速解决方案，您可以继承动画：

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

＆＃13;
＆＃13; 
@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;
  }
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

或颜色

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

＆＃13;
＆＃13; 
@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;
  }
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题