css - Wordpress CSS 页脚：悬停

问题描述

当一位朋友要求我解决这个问题时，我觉得这是一分钟的工作。在更新 mesmerize 主题后，页脚设置为默认值，她希望再次更改它。一切都很好，除了：页脚的 a:hover 不起作用。我无法修复它。

我将 CSS 更改为：

/* Footer Link-Farbe*/
.footer a {
    color: var(--color-primary);
}

/* Footer Hover-Farbe*/
.footer a:hover {
    color: var(--color-primary-light);
}

并尝试过：

/* Footer Link-Farbe*/
.footer a:link, .footer a:active, .footer a:visited {
    color: var(--color-primary);
}

/* Footer Hover-Farbe*/
.footer a:hover {
    color: var(--color-primary-light);
}

在 Firefox 开发人员工具中，我可以看到链接颜色正在工作：开发人员工具的屏幕截图

但是 :hover 不存在。

但是，如果我将悬停规则添加到开发人员工具中，它就可以工作：编辑了 css 的开发人员工具截图

我真的迷路了。我希望有人能帮忙。域名：www.ubuntu-ubuntu.at

标签： csswordpress

尝试将此 HTML 代码用于 wordpress 页脚悬停。我已经在我的电子商务 wordpress 商店中尝试过，效果很好。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
        <style>
            #footer{background:#fff;position:relative}
            .footerLogo { font-size: 1.8em; font-weight: 600; color: #333; margin-bottom: 22px; display: block; }
            #footer::before{content:"";background:linear-gradient(to right,#fff 0,#535df1 50%,#fff 100%);height:5px;width:100%;position:absolute}
            .footer-wrapper{padding:50px 0;float:left;width:100%}
            img.footer-logo{margin-bottom:20px}
            ul.social-icons{margin:0; padding: 0;}
            ul.social-icons li{background:#fff;width:30px;height:30px;border:1px solid #f1f2f2;border-radius:4px;margin:3px;text-align:center; display: inline-block;}
            ul.social-icons li a{color:#6d6e71;font-size:15px;line-height:30px}
            ul.social-icons li a:hover{color:#27aae1;transition:all 1s}
            ul.footer-links { padding: 0;  list-style-type: none; position: relative;}
            ul.footer-links li{line-height:25px; padding-left: 15px; }
            ul.footer-links li:before { position: absolute; content: 'f105'; font-family: FontAwesome; left: 0;}
            ul.footer-links li a{color:#6d6e71}
            ul.footer-links li a:hover{color:#27aae1; text-decoration: none;}
            ul.contact{margin:0;padding:0}
            ul.contact li{list-style:none;padding:15px 0;border-bottom:1px solid #f1f2f2;font-size:13px;font-weight:600;line-height:15px;}
            ul.contact li i{font-size:18px;margin-right:20px;color:#27aae1} 
            .copyright{background:#231f20;text-align:center;color:#fff;padding:12px 0 4px}
            </style>

<footer id="footer" class="bg-light mt-5">
              <div class="container">
                      <div class="footer-wrapper">
                  <div class="row">                    
                    <div class="col-md-3 col-sm-3">
                      <a href="" class="footerLogo">Company</a>
                      <ul class="social-icons">
                          <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                          <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                          <li><a href="#"><i class="fa fa-xing"></i></a></li>
                          <li><a href="#"><i class="fa fa-pinterest"></i></a></li>
                          <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
                      </ul>
                    </div>
                    <div class="col-md-2 col-sm-2">
                      <h5>For individuals</h5>
                      <ul class="footer-links">
                        <li><a href="">Signup</a></li>
                        <li><a href="">login</a></li>
                        <li><a href="">Explore</a></li>
                        <li><a href="">Finder app</a></li>
                        <li><a href="">Features</a></li>
                        <li><a href="">Language settings</a></li>
                      </ul>
                    </div>
                    <div class="col-md-2 col-sm-2">
                      <h5>For businesses</h5>
                      <ul class="footer-links">
                        <li><a href="">Business signup</a></li>
                        <li><a href="">Business login</a></li>
                        <li><a href="">Benefits</a></li>
                        <li><a href="">Resources</a></li>
                        <li><a href="">Advertise</a></li>
                        <li><a href="">Setup</a></li>
                      </ul>
                    </div>
                    <div class="col-md-2 col-sm-2">
                      <h5>About</h5>
                      <ul class="footer-links">
                        <li><a href="">About us</a></li>
                        <li><a href="">Contact us</a></li>
                        <li><a href="">Privacy Policy</a></li>
                        <li><a href="">Terms</a></li>
                        <li><a href="">Help</a></li>
                      </ul>
                    </div>
                    <div class="col-md-3 col-sm-3">
                      <h5>Contact Us</h5>
                      <ul class="contact">
                        <li><i class="fa fa-phone"></i>+1 (234) 123 1234</li>
                        <li><i class="fa fa-envelope-o"></i>info@company.com</li>
                        <li><i class="fa fa-home"></i>123 Any street second floor, INDIA</li>
                      </ul>
                    </div>
                  </div>
                  </div>
              </div>
              <div class="clearfix"></div>
              <div class="copyright">
                <p>Company © 2019. All rights reserved</p>
              </div>
                </footer>

我从https://webdesignerwall.com/wdw-snippet/footer-with-hover-effects 获取此代码

您可以在我发现的另一个线程中了解有关此问题的更多信息： https ://wordpress.org/support/topic/footer-hover-link-wont-change/

css - Wordpress CSS 页脚：悬停

问题描述

解决方案

推荐阅读