我试图在按钮上获得简单的悬停效果,该按钮已经适用于按钮背景&文本,但不适用于FontAwesome-Icon。该图标仅在非悬停状态下显示。我已经尝试过大部分组合FontAwesome悬停效果不起作用
fa-chevron-right:hover:before {color: X;}
或
.vc_btn-icon3:hover .fa-chevron-right { color: X;}
等多种组合,但我不能让它开始工作的正确途径。你可否告诉我我的错误在哪里以及它的样子?这是我已经得到的。请注意,因为我使用的是wordpress主题,所以有很多类。我作为一个新人这使得它更难geht正确的事情:/
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;
}
谢谢!
请原谅,我还要补充一点,我只想徘徊时改变FontAwesome图标的颜色。该图标显示为无悬停效果。有了悬停效果,没有图标或图标可能具有与整个背景相同的背景颜色 – DoUtDes
,因为这是您的第一篇文章,似乎已解决,您可以单击@Aziz答案旁边的刻度线来接受它。它也许应该得到赞赏,以及表示赞赏。 – David