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

您需要更正选择器：

.是一个html元素，因此不需要点.
您必须使用带有类名的点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; } */并删除空格，因为类属于同一个元素（空格在父元素之间建立关系 - ＆gt;子元素）

＆＃13;

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

＆＃13;

MatrixXf res = vec * val;

＆＃13;

Answer 3

A部分

.选择器是＆＃39; nt类，因此不需要i:hover { color: red; font-size: 20px; };像这样删除它：

B部分）

1）您错过了fa-facebook-square选择器
中的.fab
2）删除.fa-facebook-square和.fab.fa-facebook-square:hover {选择器之间的空格，因为它们引用相同的元素，更改如下：

hover

注意：如果您希望在所有i上有效hover pesudo，请使用PartA并删除PartB。但如果您想要激活.fa-facebook-square pesudo在SCRIPT5009: 'exports' is undefined上，删除PartA并使用PartB。

Answer 4

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

＆＃13;

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

＆＃13;

Answer 5

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

CSS选择器定义应用一组CSS规则的元素。参考：CSS selectors - CSS | MDN

<小时/>

行为：

选择器： .i:hover
定位元素：，类别为＆＃34; i＆＃34;，例如：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;
}

＆＃13;

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

＆＃13;

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

＆＃13;

<小时/>

行为：

选择器： .fab fa-facebook-square:hover
定位元素：包含具有嵌套元素（fa-facebook-square）的＆＃34; fab＆＃34;类的元素，例如：
问题： （1）无法使用指定的嵌套（子）元素找到包含类.fab的（父）元素， （2）指定的嵌套子元素，名称为fa-facebook-square，不存在且不是有效的html元素（明确用于引用元素指定的class属性）。
解决方案：使用 类选择器 来定位元素的类，例如：.fab或.fa等

演示：

<强> Class selector

选择具有给定类属性的所有元素。
语法： .classname
示例： .fab将匹配任何具有＆＃34;索引＆＃34;类的元素。

实施例

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

＆＃13;

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

＆＃13;

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

＆＃13;

将鼠标悬停在font-awsome图标上

5 个答案:

行为：

演示：

实施例

行为：

演示：

实施例