Question

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

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

或

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

以及许多其他组合，但我无法以正确的方式使用它。你可以告诉我我的错误在哪里以及它的外观如何？这是我已经得到的。请注意，因为我使用的是wordpress-theme，因此有很多类。对于我来说，作为一个新手，它会让事情变得更加困难：/

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

这是一个有效的演示：

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

} ＆lt; - 缺少

.fa-chevron-right:before {

working jsFiddle demo

FontAwesome悬停效果不起作用

1 个答案: