如何制作这个图标悬停效果？答案

【问题标题】：How to make this icon hover effect?如何制作这个图标悬停效果？
【发布时间】：2017-11-11 08:51:23
【问题描述】：

你能告诉我如何创建背景和图标的悬停效果吗？因为所有图标都有相同的类名。

这是facebook的代码

<div class="vc_icon_element vc_icon_element-outer vc_icon_element-align-center vc_icon_element-have-style">
    <div class="vc_icon_element-inner vc_icon_element-color-custom vc_icon_element-have-style-inner vc_icon_element-size-xl vc_icon_element-style-rounded vc_icon_element-background vc_icon_element-background-color-white">
        <span class="vc_icon_element-icon typcn typcn-social-facebook" style="color:#000000 !important"></span><a class="vc_icon_element-link" href="https://www.facebook.com/" title="" target=" _blank"></a></div>
</div>

这是推特的代码

<div class="vc_icon_element vc_icon_element-outer vc_icon_element-align-center vc_icon_element-have-style">
<div class="vc_icon_element-inner vc_icon_element-color-custom vc_icon_element-have-style-inner vc_icon_element-size-xl vc_icon_element-style-rounded vc_icon_element-background vc_icon_element-background-color-white">
    <span class="vc_icon_element-icon typcn typcn-social-twitter" style="color:#000000 !important"></span><a class="vc_icon_element-link" href="https://twitter.com/" title="" target=" _blank"></a></div>

【问题讨论】：

可能使用精灵来移动悬停时的背景位置。
请添加一些代码...

标签： css wordpress css-selectors

【解决方案1】：

也许以 .vc_icon_element 为目标并添加如下内容：

.vc_icon_element:hover {
    background-color: red;
}

或以该范围为目标

.vc_icon_element:hover span {
    background-color: red;
}

【讨论】：

现在它可以用于背景，但也需要为图标设置悬停，您能帮帮我吗？
您也可以定位 vc_icon_element-icon，因此当您的 .vc_icon_element 悬停时，您只需将 vc_icon_element-icon 添加到末尾即可。例如：.vc_icon_element:hover .vc_icon_element-icon { color: blue; }
那么，如果背景元素是：.facebook-ikona，图标元素是.typcn-social-facebook，结构会怎样？我有点困惑。
在那种情况下，它将是 .facebook-ikona .vc_icon_element-background:hover .typcn-social-facebook { color: blue; }
再试一次，我根据你的背景工作稍微编辑了代码