Question

如何使用悬停属性更改font-awesome 2次的颜色。

＆＃13;

.single-post {
  width: 100px;
  height: 100px;
  background:grey;
}

.my-link {
  color: white;
}

.single-post:hover .my-link {
  color: black;
}

.my-link:hover {
  color: red;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="single-post">
  <i class="my-link fa fa-exchange" aria-hidden="true"></i>
</div>

＆＃13;

此处我无法在悬停时将其red。

如何通过先悬停黑色再变为红色来改变颜色？

Answer 1

你可以使用这样的关键帧。

＆＃13;

.single-post {
width: 100px;
height: 100px;
background: gray;
}
.my-link {
color: white;
}
.single-post:hover .my-link {
  -webkit-animation: coloranimation 0.5s normal forwards; 
  -moz-animation:    coloranimation 0.5s normal forwards;
  -o-animation:      coloranimation 0.5s normal forwards;
}
@-webkit-keyframes coloranimation {
    0%   {color: white;}
    50%  {color: black;}
    100% {color: red;}
}

/* Standard syntax */
@keyframes coloranimation {
    0%   {color: white;}
    50%  {color: black;}
    100% {color: red;}
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="single-post">
  <i class="my-link fa fa-exchange" aria-hidden="true"></i>
</div>

＆＃13;

Answer 2

我假设你想直接悬停在链接上并改为红色。

.single-post:hover .my-link:hover {
  color: red;
}

<强>段

.single-post {
  width: 100px;
  height: 100px;
}

.my-link {
  color: white;
}

.single-post:hover .my-link {
  color: black;
}

.single-post:hover .my-link:hover {
  color: red;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="single-post">
  <i class="my-link fa fa-exchange" aria-hidden="true"></i>
</div>

hover属性如何在CSS中多次工作

2 个答案: