20

我被这个问题困扰了一段时间，似乎找不到答案，所以我决定直接问。

我正在使用 Flexslider 插件在网站上显示多个图像，但是，悬停图像时显示的箭头导航已关闭。箭头在顶部被切断，它下面应该完全隐藏的文本部分显示。这是问题的屏幕截图：

在此处输入图像描述

我尝试修改 CSS，但我就是想不通。有人可以帮我吗？

4

6 回答 6

27

您也可以添加line-height来解决它：

.flex-direction-nav a  {
    line-height: 40px;
}

PS：这似乎是一个 Flexslider 错误，它在默认设置下无法正常工作。

于 2014-01-14T13:45:49.237 回答
25

overflow: hidden;从中删除.flex-direction-nav a：

.flex-direction-nav a  { 
    display: block; 
    width: 40px; 
    height: 40px; 
    margin: -20px 0 0; 
    position: absolute; 
    top: 50%; z-index: 10; 
    overflow: hidden; /* Remove this line */
    opacity: 0; 
    cursor: pointer; 
    color: rgba(0,0,0,0.8); 
    text-shadow: 1px 1px 0 rgba(255,255,255,0.3); 
    -webkit-transition: all .3s ease; 
    -moz-transition: all .3s ease; 
    transition: all .3s ease; 
}

如果您需要更改或删除默认显示为“上一个”和“下一个”的文本，请在此处查阅插件的选项文档“根据您的需要定制”：http ://www.woothemes.com/flexslider/

之后，只需更新以下设置：

prevText: "Previous",    //String: Set the text for the "previous" directionNav item
nextText: "Next",        //String: Set the text for the "next" directionNav item
于 2013-11-06T16:41:59.833 回答
0

我设法通过更改 flexslider CSS 中“flexslider-icon”的字体大小（在 flexslider.css 中的第 70 行左右）使其工作。

它似乎默认设置为 40px，但将其更改为 30px 在我正在构建的两个网站上效果很好。

于 2014-04-08T17:08:42.697 回答
0

只需添加 

.flex-direction-nav li a{
      height:50px; 
}

这会覆盖默认的 css

于 2016-03-14T22:13:24.670 回答
0

打开“jquery.flexslider.js”文件并"// Primary Controls"在第 1125 行搜索（大约）。你会发现，

// Primary Controls
controlNav: true,
directionNav: true,
prevText: "Previous",
nextText: "Next",

在这里，您需要删除下一个和上一个文本，然后再次保存。

希望这会有所帮助。

于 2015-12-12T06:10:58.487 回答
0

箭头是一种字体，对于它的容器来说太大了。

只需添加此 CSS，它将减小字体的大小，进而解决截断问题。

.flex-direction-nav a:before {
    font-family: "flexslider-icon";
    font-size: 35px;
    display: inline-block;
    content: '\F001';
    color: rgba(0, 0, 0, 0.8);
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
}

将此添加到您的 CSS 中，它将覆盖 flexslider 的默认设置

于 2018-09-15T05:20:26.797 回答