如何使字体真棒图标悬停在目标文本周围

Question

当我定位"youtube"单词时，任何使字体很棒的图标(Youtube播放图标(悬停(将颜色更改为红色(的建议？但是没有让 Youtube 也改变颜色(仅字体真棒图标(？

 .fa-youtube-play:hover {
    color: red;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

                <li><a href="index.html"><i class="fa fa-youtube-play"></i> Youtube Channel</a>
                </li>

Answer 1

使用

ul li a:hover .fa-youtube-play{
    color: red;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<ul><li><a href="index.html"><i class="fa fa-youtube-play"></i> Youtube Channel</a>
</li></ul>

Answer 2

创建一个CSS选择器来控制容纳Youtube图标的i标签。新的选择器可能a:hover i 。一个工作示例：

.fa-youtube-play:hover {
    color: red;
}
a:hover i {
  color: red;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<li><a href="index.html"><i class="fa fa-youtube-play"></i> Youtube Channel</a>
</li>

注意： 您可以将 CSS 选择器更改为更具体，以缩小受影响元素的数量。例如a:hover .fa-youtube-play，或li a:hover .fa-youtube-play，甚至定义一个ID名。

Answer 3

使用 li 作为选择器：

li:hover .fa-youtube-play {
    color: red;
}

Answer 4

我建议：

li a:hover i.fa-youtube-play {
  color: red;
}

li a:hover i.fa-youtube-play {
  color: red;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<ul>
  <li><a href="index.html"><i class="fa fa-youtube-play"></i> Youtube Channel</a>
  </li>
</ul>

当将父<a>元素悬停在上面时，这会设置.fa-youtube-icon样式 - 因为在CSS中，没有办法基于同级"Youtube"字符串的悬停来设置<i>元素的样式 - 这意味着必须为每个正在使用的替代图标实现单独的颜色适当的样式规则，例如.fa-twitter-icon等。