Question

＆＃13;

.fa-free-code-camp:hover{
   transform: rotate(0deg);
   transition: all 0.3s ease;
   color: #1B5E20;
}

.fa:hover {
   transform: rotate(0deg);
   transition: all 0.3s ease;
   color: #1A237E;
 }
        
 .fa{
   font-size: 30px;
   transform: rotate(-25deg);
   transition: all 0.5s ease;
 }

＆＃13;

<div role="navigation">
   <nav class="nav nav-inline  ">
  <a class="nav-link" href="#"><i class="fa  fa-linkedin-square large-class " aria-hidden="true"></i></a>
  <a class="nav-link" href="#"><i class="fa fa-github large-class" aria-hidden="true"></i></a>
  <a class="nav-link " href="#"><i class="fa fa-link large-class" aria-hidden="true"></i></a>
   <a class="nav-link " href="#"><i class="fa fa-free-code-camp large-class" aria-hidden="true"></i></a>
</nav>       
</div>

＆＃13;

＃

我如何定位fa-free-code-camp：只有在其他人按照代码指令时才悬停。我只是希望这个例子的颜色不同。

Answer 1

您的问题是您有两个具有相同specificity的规则，因此后面的规则会覆盖先前的规则。

更改规则的顺序，使.fa-free-code-camp:hover在.fa:hover之后，或将.fa-free-code-camp:hover的特异性提高到.fa.fa-free-code-camp:hover。

Answer 2

试试这个

.fa.fa-free-code-camp:hover{
   transform: rotate(0deg);
   transition: all 0.3s ease;
   color: #1B5E20;
}

Answer 3

我已经改变了你的样式声明的位置，如果你想在已经应用的css上应用新的css，你需要在那里指定两个类

Here是一个工作示例的jsFiddle。下面是一个css代码，你可以检查不同。

.fa{
    font-size: 30px;
    transform: rotate(25deg);
    transition: all 0.5s ease;
}
.fa:hover {
    transform: rotate(0deg);
    transition: all 0.3s ease;
    color: #1A237E;
}
.fa.fa-free-code-camp:hover{
    transform: rotate(0deg);
    transition: all 0.3s ease;
    color: #ffffff;
}

选择并悬停特定锚标记

＃

3 个答案: