懸停屬性如何在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; 
} 

代碼片段

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