将鼠标悬停在字体很棒的图标上

Question

因此，我试图瞄准字体 - 令人敬畏的图标并将悬停效果放在它们上面，我希望它们能够改变颜色，并且当将鼠标悬停在它们上方时也会变得更大。但是我没有尝试如何定位我不会工作的课程。

.i:hover {
color: red;
font-size: 20px;

}


.fab fa-facebook-square:hover {
    color: red;
    font-size: 20px;    

} 

<a href="https://www.facebook.com/profile.php?id=509317209&ref=bookmarks" target="_blank"> <i class="fab fa-facebook-square fa-2x"></i></a>
            <a href="https://www.instagram.com/ponteeee/" target="_blank"><i class="fab fa-twitter-square fa-2x"></i></a>
            <a href="https://www.instagram.com/ponteeee/" target="_blank"><i class="fab fa-instagram fa-2x"></i></a>

Answer 1

i不是一个类，它是一个元素。因此，您应该在开头放弃.

i:hover {
   color: red;
   font-size: 20px;
}

此外，由于第二个选择器中有两个类，你需要在这两个类之间删除空格，

.fab.fa-facebook-square:hover {
    color: red;
    font-size: 20px;
}

如果你在中间添加一个空格，它会让人觉得fa-facebook-square是fab的孩子

并且您不需要这两个规则，因此您可以删除其中一个规则

前往https://www.w3schools.com/cssref/css_selectors.asp了解有关CSS选择器的更多信息。

此外，为了使过渡更加平滑，您可以添加一个小过渡，

i {
    color: red;
    font-size: 20px;
    transition: 0.2s;
}

Answer 2

你需要纠正你的选择器：

• i是一个HTML元素，因此不需要点.
• 你必须使用带有类名的点.并删除空格，因为类属于同一个元素（空格在parent - > child元素之间建立关系）

i:hover {
  color: red;
  font-size: 20px;
}

/* This CSS is useless and can be removed 
.fab.fa-facebook-square:hover {
  color: red;
  font-size: 20px;
}
*/

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<a href="https://www.facebook.com/profile.php?id=509317209&ref=bookmarks" target="_blank"> <i class="fab fa-facebook-square fa-2x"></i></a>
<a href="https://www.instagram.com/ponteeee/" target="_blank"><i class="fab fa-twitter-square fa-2x"></i></a>
<a href="https://www.instagram.com/ponteeee/" target="_blank"><i class="fab fa-instagram fa-2x"></i></a>

Answer 3

在此输入代码使用此代码，您可以将鼠标悬停在所有三种图标字体上。

.fab.fa-facebook-square:hover, 
.fab.fa-twitter-square:hover,
.fab.fa-instagram:hover{
  color: red;
  font-size: 20px;
}


/*Or giving them seperate color for each icon-font


/*Blue color for Instagram*/
.fab.fa-facebook-square:hover{
  color: blue;
  font-size: 20px;
}

/*LightBlue color for Instagram*/ 
.fab.fa-twitter-square:hover{
  color: #ADD8E6; 
  font-size: 20px;
}

 
/*Instagram Logo Dark Blue*/
.fab.fa-instagram:hover{
  color:#125688;
  font-size: 20px;
}

Answer 4

A部分）

i选择器是'class class，所以不需要.;像这样删除它：

i:hover { color: red; font-size: 20px; }

B部分）

1）你错过了.选择器中的fa-facebook-square

2）删除.fab和.fa-facebook-square选择器之间的空间，因为它们引用相同的元素，改变如下：

.fab.fa-facebook-square:hover {

注意：如果你想在所有hovers上激活qazxsw poi伪，使用PartA并删除PartB。但如果你想在i上激活hover伪，删除PartA并使用PartB。

Answer 5

CSS选择器必须正确指定要定位的元素。

CSS选择器定义应用一组CSS规则的元素。参考：.fa-facebook-square

---

行为：

• 选择者：CSS selectors - CSS | MDN
• 定位元素：具有“i”类，例如：.i:hover
• 问题：找不到类class="i"的元素
• 解决方案：使用类型选择器来定位元素的类型，例如：.i

示范：

i

• 选择与给定节点名称匹配的所有元素。
• 语法：Type Selector
• 示例：eltname将匹配任何i元素。

例：

<i>

/* to apply rule to all intended elements, specify the type of selector*/
i:hover {
  color: red;
  font-size: 20px;
}

* {
  transition: .7s;
}

/* to apply rule to all intended elements, specify the type of selector*/
i:hover {
  color: red;
  font-size: 20px;
}

---

行为：

• 选择者：

  <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
  <h3>To rectify the issue:</h3>
  <ul class="fa-ul">
    <li><i class="fab fa fa-facebook-square fa-2x"></i></li>
    <li><i class="fab fa fa-twitter-square fa-2x"></i></li>
    <li><i class="fab fa fa-instagram fa-2x"></i></li>
  </ul>

• 定位元素：包含具有“fab”类的元素，具有嵌套元素（.fab fa-facebook-square:hover），例如：
• 问题：（1）不能找到包含类fa-facebook-square的（parent）元素，指定的嵌套（子）元素，（2）指定的嵌套子元素，名称为.fab，不存在且不是有效的fa-facebook-square元素（显然是为了引用具有指定html属性的元素）。
• 解决方案：使用Class选择器来定位元素的类，例如：class或.fab等。

示范：

.fa

• 选择具有给定类属性的所有元素。
• 语法：Class selector
• 示例：.classname将匹配具有“index”类的任何元素。

例：

.fab

/* to apply rule to all intended elements, specify the recurring class selector*/
.fab:hover {
  color: red;
  font-size: 20px;
}

* {
  transition: .7s;
}

/* to apply rule to all intended elements, specify the recurring class selector*/
.fab:hover {
  color: red;
  font-size: 20px;
}