글꼴 멋진 호버 변화

나는 다음과 같은 아이콘이 : 나는 그것을 가져 가면 나는 검은 색으로 그 내부의 색상을 변경하려면 아이콘을 원하는글꼴 멋진 호버 변화

.fa-star-o:hover { 
 
    color: black; 
 
}

<link href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css" rel="stylesheet" /> 
 
<i class="fa fa-star-o fa-2x"></i>

과 마우스, fa-star 아이콘과 같지만이 코드를 사용하면 윤곽선 색 만 변경됩니다.

출처

2017-04-02 Rafael Duarte

사용 stacked icons :

.fa-star{ 
 
    color: white /* your background color */ 
 
} 
 

 
.fa-stack:hover .fa-star{ 
 
    color: black; 
 
}

<link href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css" rel="stylesheet"/> 
 
<span class="fa-stack fa-lg"> 
 
    <i class="fa fa-star fa-stack-2x"></i> 
 
    <i class="fa fa-star-o fa-stack-2x"></i> 
 
</span>

JSFiddle

출처

2017-04-02 22:56:40 Vucko

그리고 나는 그것이 내가 기본적으로 내부의 검은 색과 FA-별을 사용하고 싶어하고 나는 그것을 마우스를 가져 가면, 내부 색상은 흰색 밝혀진다면 어떻게 할 것인가? –

@RafaelDuarte [색상 변경] (http://jsfiddle.net/6s6p6x04/2/). – Vucko

그렇게하려고하면 배경과 대조되는 보이지 않는 퍼팅 외곽선 색상 만 바뀝니다. (하얀 흰색) –

당신은 아이콘 fa-star-o 필요하지 않습니다. 단지 fa-star 사용

.fa-star:hover { 
 
    color: black; 
 
    cursor:pointer 
 
} 
 
.fa-star { 
 
    color:white; 
 
    transition:color 0.5s 
 
} 
 
body { 
 
    background-color:red !important; 
 
}

<link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css"> 
 
<link rel="stylesheet" href="http://fontawesome.io/assets/css/site.css"> 
 

 
<div style="font-size: 24px; line-height: 1.5em;" id="parent"> 
 
    <div style="font-size: 24px; line-height: 1.5em;"> 
 
     <i class="fa fa-star" aria-hidden="true"></i> 
 
    </div> 
 
</div>

출처

2017-04-02 22:59:01 repzero

OP는 아이콘의 내부 색만 변경하려고하며 _outline_을 그대로 둡니다. – Vucko

답변

관련 문제