2016-02-27 214 views
1

我试图在按钮上获得简单的悬停效果,该按钮已经适用于按钮背景&文本,但不适用于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; 
} 

谢谢!

+0

请原谅,我还要补充一点,我只想徘徊时改变FontAwesome图标的颜色。该图标显示为无悬停效果。有了悬停效果,没有图标或图标可能具有与整个背景相同的背景颜色 – DoUtDes

+1

,因为这是您的第一篇文章,似乎已解决,您可以单击@Aziz答案旁边的刻度线来接受它。它也许应该得到赞赏,以及表示赞赏。 – David

回答

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; 

} < - 缺少

.fa-chevron-right:before { 

working jsFiddle demo

+0

嘿阿齐兹, 你让我的一天!有没有办法很容易地找到正确的选择器,也许有像萤火虫或某种工具。像那样?无论如何,你的解决方案运作良好。非常感谢你的帮助,我已经花了几个小时才找到正确的css选择器!谢谢! :) – DoUtDes

+0

您可以随时使用开发人员检查器查看您需要定位哪个元素,甚至可以使用它的CSS使用'style'窗口进行活动,以确保您想要进行的更改能够正常工作。对于':hover',总是建议先从父项开始(通常是定位标记或按钮),然后添加想要在悬停状态下更改的子元素,如下所示:'parent:hover child {change; }'在你的情况下,父母是'#dt-btn-1'和我们想改变的孩子是'.fa-chevron-right:之前' – Aziz

+1

非常感谢你阿齐兹,我会牢记这一点!有一个伟大的夜晚,一天,一周,一个月和一年。祝你最好:) – DoUtDes