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

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

我建议：

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 中无法根据 <i> 元素设置样式兄弟 "Youtube" 字符串的悬停 – 这意味着必须为正在使用的每个替代图标实施单独的颜色适当的样式规则，例如 .fa-twitter-icon 等等。

Answer 2

使用

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 3

创建一个 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 4

使用 li 作为选择器：

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

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

How to make font awesome icon hover when target text around?

css

html

colors

font-awesome