FontAwesome 悬停效果不起作用

Question

我正在尝试在按钮上获得简单的悬停效果，该效果已经适用于按钮背景和文本，但不适用于 FontAwesome-Icon。图标仅在非悬停时出现。我已经尝试过大多数组合，例如

fa-chevron-right:hover:before {color: X;}

或

.vc_btn-icon3:hover .fa-chevron-right { color: X;}

和许多其他组合，但我无法让它以正确的方式工作。你能告诉我我的错误在哪里以及它看起来如何吗？这是我已经得到的。请注意，因为我使用的是 wordpress 主题，所以有很多类。作为一个新手，这让我更难把事情做好 :/

HTML

 <div class="shortcode-action-container action-button">
    <a href="LINK" class="btn-shortcode dt-btn-l dt-btn default-btn-color
     default-btn-hover-color default-btn-bg-color default-btn-bg-hover-color 
    fadeIn animate-element animation-builder" 
    target="_blank" id="dt-btn-1">
    <span>Mehr Informationen 
    <i class="vc_btn3-icon fa fa-chevron-right"></i></span></a></div>

CSS

#dt-btn-1 {
background-color:#002E5B;
color: #fff;
font-family: Montserrat;
font-size: 14px;
line-height: 23px;
font-weight: 700;
background: #002E5B;
border: solid 3px transparent;
padding: 8px 21px;
}

.vc_btn3-icon {
margin-left: 0.5em;
margin-right: 0px !important;

.fa-chevron-right:before {
font-family: FontAwesome;
color: #002e5b;
content: "\f054";
font-size: 14px;
line-height: 14px;
color: #fde428;
}

#dt-btn-1:hover {
background: none;
background: transparent !important;
background-color: transparent !important;
border-color: #fff !important;
border-radius: 3px;
color: #002e5b !important;
border: solid 3px #fff;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}

谢谢！

Answer 1

定位图标的正确方法是使用以下选择器：

#dt-btn-1:hover .fa-chevron-right:before { ... }

这是一个工作演示：

a {text-decoration: none;}

#dt-btn-1 {
  background-color: #002E5B;
  color: #fff;
  font-family: Montserrat;
  font-size: 14px;
  line-height: 23px;
  font-weight: 700;
  background: #002E5B;
  border: solid 3px transparent;
  padding: 8px 21px;
}

.vc_btn3-icon {
  margin-left: 0.5em;
  margin-right: 0px !important;
}

.fa-chevron-right:before {
  font-family: FontAwesome;
  color: #002e5b;
  content: "\f054";
  font-size: 14px;
  line-height: 14px;
  color: #fde428;
  transition: all .2s ease-in-out;
}

#dt-btn-1:hover {
  background: none;
  background: transparent !important;
  background-color: transparent !important;
  border-color: #fff !important;
  border-radius: 3px;
  color: #002e5b !important;
  border: solid 3px #fff;
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

#dt-btn-1:hover .fa-chevron-right:before {
  color: red;
}

<div class="shortcode-action-container action-button">
  <a href="LINK" class="btn-shortcode dt-btn-l dt-btn default-btn-color
     default-btn-hover-color default-btn-bg-color default-btn-bg-hover-color 
    fadeIn animate-element animation-builder" target="_blank" id="dt-btn-1">
    <span>
      Mehr Informationen
      <i class="vc_btn3-icon fa fa-chevron-right"></i>
    </span>
  </a>
</div>

请注意，您的 CSS 代码无效，因为：

.vc_btn3-icon {
margin-left: 0.5em;
margin-right: 0px !important;

} <- missing

.fa-chevron-right:before {

working jsFiddle demo

FontAwesome 悬停效果不起作用

FontAwesome hover effect not working

html

css

hover

font-awesome