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

＆＃13;

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

＆＃13;

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

＆＃13;

当父.fa-youtube-icon元素悬停时，这会为<a>设置样式 - 因为在CSS中没有基于hover为<i>元素设置样式的方法兄弟姐妹＆＃34; Youtube＆＃34; string - 这意味着必须为正在使用的每个替代图标实现单独的颜色相应的样式规则，例如.fa-twitter-icon等。

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

4 个答案: