CSSでホバープロパティーが複数回動作する方法

Question

ホバープロパティでフォントの色を2倍に変更する方法を教えてください。ここで

.single-post { 
 
    width: 100px; 
 
    height: 100px; 
 
    background:grey; 
 
} 
 

 
.my-link { 
 
    color: white; 
 
} 
 

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

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

私はホバーでそれred作ることができません。

どのように色をホバーで最初に黒とそれから赤に変えるのですか？

Answer 1

リンクに直接カーソルを合わせ、赤色に変更したいとします。

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

SNIPPET

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

Answer 2

次のようにキーフレームを使用することができます。

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

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