버튼을 올려 놓고 글꼴의 종류를 변경합니다.

Question

다른 프로젝트에서 이와 똑같은 일을했기 때문에 실제로 지금은 끓고 있습니다. 내가 만든 버튼이 있는데, 그것은 <a> 태그입니다. <a> 태그 안에는 아이콘으로 <i class="fa">이 있습니다. 버튼 위로 마우스를 가져 가면 <i> 아이콘의 색상을 변경하고 싶습니다. 나는 코드가 맞다는 것을 긍정적으로 생각하고, 그냥 일하기를 거부한다. 여기 내 코드입니다 :

HTML :

<div id="workspace"> 

    <a href="#" class="hlo-btn-round">Search <i class="fa fa-search fa-color" aria-hidden="true"></i></a> 

</div> 

CSS :

/* Control Icon Color */ 
.fa-color { 
    color: #99999a; 
} 

/* Control Icon Color on Hover (scripted) */ 
.fa-hover-color { 
    color: #323335; 
} 


/* Basic Round Button Styling */ 
.hlo-btn-round, .hlo-btn-round:link, .hlo-btn-round:visited, .hlo-btn-round:active, .hlo-btn-round:focus { 
    margin-top: 0px; 
    padding: 5px 20px; 
    border: 1px solid transparent; 
    border-radius: 25px; 
    line-height: 1.42857143; 
    font-family: "Trebuchet MS"; 
    text-decoration: none; 
    text-decoration-color: black; 
    vertical-align: middle; 
    background-color: white; 
    color: black; 
    cursor: pointer; 
    display: inline-block; 
} 

.hlo-btn-round:hover { 
    background-color: #CCCCD1; 
} 

스크립트 :

$('hlo-btn-round').hover(function(){ 
    $(this).children().switchClass('fa-color', 'fa-hover-color'); 
}, function(){ 
    $(this).children().switchClass('fa-hover-color', 'fa-color'); 
}); 

Answer 1

스크립트가 필요, 순수 CSS에서 할-할 수 있어야한다 - 아래 참조 :

/* Control Icon Color */ 
 
.fa-color { 
 
    color: #99999a; 
 
} 
 

 

 
/* Basic Round Button Styling */ 
 
.hlo-btn-round, .hlo-btn-round:link, .hlo-btn-round:visited, .hlo-btn-round:active, .hlo-btn-round:focus { 
 
    margin-top: 0px; 
 
    padding: 5px 20px; 
 
    border: 1px solid transparent; 
 
    border-radius: 25px; 
 
    line-height: 1.42857143; 
 
    font-family: "Trebuchet MS"; 
 
    text-decoration: none; 
 
    text-decoration-color: black; 
 
    vertical-align: middle; 
 
    background-color: white; 
 
    color: black; 
 
    cursor: pointer; 
 
    display: inline-block; 
 
} 
 

 
.hlo-btn-round:hover { 
 
    background-color: #CCCCD1; 
 
} 
 

 
.hlo-btn-round:hover .fa { 
 
    color: #323335; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> 
 
<div id="workspace"> 
 

 
    <a href="#" class="hlo-btn-round">Search <i class="fa fa-search fa-color" aria-hidden="true"></i></a> 
 

 
</div>

Answer 2

편집 : @ochi이 아주 잘 귀하의 질문에 아래의 코멘트에 발견되면서, 당신의 오류는 오히려 일반적인 하나입니다. 당신은 사실, 당신은 아마 $('.hlo-btn-round')를 사용해야하는 경우, 어떤

<hlo-btn-round></hlo-btn-round> 

... 요소를 선택할 것 $('hlo-btn-round')을 선택하고 있습니다.

적절한 유형의 IDE와 같은 더 나은 코딩 도구를 사용하면 이러한 유형의 오류를 쉽게 피할 수 있습니다.이 도구는 오타를 즉시 강조 표시합니다.

---

초기 대답은 :.switchClass()는 (나는 한번도 들어 본 적이없는 어떤 - 나는 정확히 신인 아니에요) jQueryUI의 일부가 될 것으로 보인다. 아마 당신은 다른 프로젝트에로드했지만이 프로젝트에는로드하지 않았을 것입니다.

jQuery를 그 조건 (클래스 제거) 훨씬 더 인기가도 (클래스를 추가) 조건을 확인하고 true를 반환하는 두 번째 PARAM 같은 기능을 할 수 .toggleClass(), 또는 false을 제공합니다.

그러나 실제로는 JavaScript이 필요하지 않습니다. 간단 :

.parent .child {/* normal state CSS here */} 
.parent:hover .child {/* hover state CSS here */} 

... 할 것입니다. 또는 parent .child:hover{} (필요에 따라 :hover을 붙이면 효과를 트리거하려는 요소에 설정).