Question

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

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

Answer 1

也许定位.vc_icon_element并添加如下内容：

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

或目标跨度

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

如何使这个图标悬停效果？

1 个答案: