2016-04-09 9 views
0

Googleマテリアルアイコンを使用し始めました。Googleアイコンが次のように変更されました:focus

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" 
     rel="stylesheet"> 

<a title="E-mail " href="mailto:[email protected]?subject=RE:&nbsp;Estimate Request"><i class="material-icons md-36 bg_white">email</i></a> 
    <a title="Call" href="tel:+15555555"><i class="material-icons md-36 bg_white">call</i></a> 
    <a title="Send SMS" href="sms:+5555555"><i class="material-icons md-36 bg_white">message</i></a> 

タブで選択されたとき、アイコンがハイライトされていること(薄い青色の境界線以外の)多くの明白な視覚的なキューが存在するように、フォーカス上のアイコンを強調表示する方法はありますか?色の変更、オーバーレイ、タイトルの表示など...

ここに私のCSSがあります:フォーカスに追加しようとしましたが、何も変わりません。

.material-icons.md-18font-size:18px} 
.material-icons.md-24{font-size: 24px} /* Default */ 
.material-icons.md-36{font-size: 36px} 
.material-icons.md-48{font-size: 48px} 
.material-icons{color:green /*#663300*/} 
.material-icons:active, .material-icons:focus, .material-icons:hover{color:#8bc34a} 

ありがとうございました。

答えて

0

これはタイプミスですか、それともソースコードでも同じですか?後者の場合は、最初の行にある{の部分には、.material-icons.md-18font-size:18px}があり、.material-icons.md-18{font-size:18px}になるはずです。それを修正すると、アイコンの色が少なくとも:hoverに変わります。

関連する問題