ボタンをホバーしてフォントの種類を変える驚くばかりのアイコン

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（クラスの追加）またはfalseを返します（クラスを削除）するために、第2のparamとしての機能を取ることができ、はるかに人気.toggleClass()を提供します。

しかし、実際にはJavaScriptは必要ありません。簡単です：

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

...となります。またはparent .child:hover{}（必要に応じて、エフェクトをトリガーするエレメントに:hoverを設定します）。