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 中的 class .flex-direction-nav li a（您 link 编辑了两次）。从 class 中删除高度、宽度和文本缩进并添加 padding:15px;。然后在样式表 flexslider.css 中将 class .flex-direction-nav a::before 更改为 display:block; 而不是 display:inline-block; 并且在同一样式表中，设置 .flex-direction-nav a 宽度和高度为 40px。但是请确保只在样式表 style.css 中保留一个 link，因为样式会相互覆盖，因此很难在 css.

中找到问题

如果有帮助请告诉我。

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

Flexslider nav buttons not visible on hover, with orange box

javascript

css

wordpress

jquery

flexslider