はここ同時に

Question

をホバーの色を変更する必要があり、私が達成しようとしているものです：

1. ボタンがリンクに接続する必要があります。
2. テキストとアイコンは同時に金色に移動する必要があります（色が別々に変更されます。つまり、アイコンの上にカーソルを置いた場合はテキストに適用されず、逆も同様です）。
3. アイコンのサイズはテキストのフォントサイズより大きくする必要があります。ここで

私のHTMLとCSSへのリンクです：http://www.cssdesk.com/pkVpY

本当にありがとうございました！

<div> 
<i class="fa fa-file-text-o events_icon" aria-hidden="true"></i> 
<a class="events_btn" href="http://www.google.org/" 
target="_blank" 
style="color: white; text-decoration: none;"> 
VIEW ALL EVENTS 
</a> 
</div> 

Answer 1

アンカータグの内側にアイコン要素を追加します。

Answer 2

このようにHTMLを変更すると、アイコンとテキストをすべてクリックできるようになります。あなたが今持っている方法では、テキストはクリック可能ですが、人々はアイコンをクリックすることはできません。

レイアウトは次のようにする必要があります：

<a class="some-class"> 
    <i></i> <!-- the icon --> 
    <span></span> <!-- the text --> 
</a> 

今<div>はデフォルトでdisplay:blockであることに留意してください。デフォルトではdisplay: inlineです。 display:blockにするには、<a>にCSSルールが必要です。

直接子セレクタを使用して、すべての子に影響を与えることができます。使用したテキストのために

代わり.events_icon:hover {}

の使用.some-class:hover>i{}

.some-class:hover>span{}