谷歌图标改变:焦点

Question

我刚开始使用Google Material图标。

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

<a title="E-mail " href="mailto:es@example.com?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:我尝试添加到:focus中，但没有任何变化。

.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}

谢谢。

Answer 1

这是一个拼写错误，还是你在源代码中也有同样的错误？因为，如果是后者，那么在第一行的CSS中似乎缺少一个{，其中有.material-icons.md-18font-size:18px}，而它应该是.material-icons.md-18{font-size:18px}。修复它确实会改变图标的颜色，至少在:hover上是这样。