Question

我的页脚带有一些社交媒体图标。我想更改其正常状态的颜色，但不影响它们更改颜色的悬停状态？

该网站是-https://ffe-dev.flowersforeveryone.co.za/

有人可以告诉我如何更改这4个图标的颜色，以便它们在悬停时仍可以更改颜色吗？谢谢

用于创建此代码的代码如下-

<?php if ( has_nav_menu( 'social' ) ) : ?>
                        <nav id="social-navigation" class="social-navigation">
                            <ul id="menu-social-menu" class="nav navbar-nav">
                                <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-27">
                                    <a href="https://www.facebook.com/FlowersForEveryoneCapeTown/" class="customize-unpreviewable">Facebook</a>
                                </li>
                                <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-33">
                                    <a href="https://twitter.com/LekkerFlowers" class="customize-unpreviewable">Twitter</a>
                                </li>
                                <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-32">
                                    <a href="https://za.pinterest.com/flowersforeveryone/" class="customize-unpreviewable">Pinterest</a>
                                </li>
                                <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-30">
                                    <a href="https://www.instagram.com/flowersforeveryone_capetown/" class="customize-unpreviewable">Instagram</a>
                                </li>
                            </ul>
                            <?php

Answer 1

检查此视频并放置样式如果您需要类似以下内容：

https://www.screenmailer.com/v/QMdg6fBKFaz8wfo

.social-navigation > ul > li a[href*="facebook"]:hover {
    background-color: #4267B2;
}
.social-navigation > ul > li a[href*="twitter"]:hover {
    background-color: #38A1F2;
}
.social-navigation > ul > li a[href*="pinterest"]:hover {
    background-color: #E73E3A;
}
.social-navigation > ul > li a[href*="instagram"]:hover {
    background-color: #3f729b;
}

.content-info a, .content-info a:before {
    color: #ffffff !important;
}

如果需要更改字体图标上的颜色悬停，请使用以下代码：

.social-navigation > ul > li a[href*="facebook"]:hover:before {
    color: #4267B2 !important;
}
.social-navigation > ul > li a[href*="twitter"]:hover:before {
    color: #38A1F2 !important;
}
.social-navigation > ul > li a[href*="pinterest"]:hover:before {
    color: #E73E3A !important;
}
.social-navigation > ul > li a[href*="instagram"]:hover:before {
    color: #3f729b !important;
}
.content-info a, .content-info a:before {
    color: #ffffff !important;
}

Answer 2

.content-info a, .content-info a:before {
 color: white 
 }

您将必须在索引页面中找到此类.content-info a, .content-info a:before，然后更改颜色。

如果没有，只需添加一个自定义CSS：

 .content-info a, .content-info a:before {
     color: white !important
     }

更改社交媒体图标的颜色

2 个答案: