Flexslider导航按钮在悬停时不可见，带有橙色框

Question

我在WordPress网站上使用FlexSlider 2。

来回导航按钮不起作用——向后导航按钮只是一个橙色框，向前导航按钮看起来很奇怪。

点击此处查看：http://www.friendshipart.net/artists-acf/

CSS在这里：http://www.friendshipart.net/wp-content/themes/colored-friendshipart/flexslider.css

以下是脚本（在header.php中）：

<script type="text/javascript" charset="utf-8">
  $(window).load(function() {
    $('.flexslider').flexslider({
        // Primary Controls
            directionNav: true,
            animation: "slide",
            controlsContainer: ".flex-nav-container",
    });
  });
</script>

如何使导航按钮正常显示？

Answer 1

更改样式表style.css中的类.flex-direction-nav li a（您链接了两次）。从该类中删除高度、宽度和文本缩进，并添加padding:15px;。然后在样式表flexslider.css中，将类.flex-direction-nav a::before更改为display:block;而不是display:inline-block;，并且在同一样式表中，将.flex-direction-nav a的宽度和高度设置为40px。但是，请确保只保留一个指向样式表style.css的链接，因为样式会相互覆盖，很难在css中找到问题。

如果这有帮助，请告诉我。