問題描述

我被這個(gè)問題困擾了一段時(shí)間，似乎找不到答案，所以我決定直接問.

I've been stuck with this problem for some time, and can't seem to find an answer, so I decided to ask straight.

我正在使用 Flexslider 插件在一個(gè)網(wǎng)站上顯示多個(gè)圖像，但是，懸停圖像時(shí)顯示的箭頭導(dǎo)航已關(guān)閉.箭頭在頂部被切斷，它下面應(yīng)該完全隱藏的文本部分顯示.這是問題的屏幕截圖:

I am using the Flexslider plugin to display multiple images on a site, however, the arrows navigation that displays when hovering the image is off. The arrow is cut off at the top, and the text underneath it that is supposed to be completely hidden is partly showing. Here is a screen shot of the problem:

我嘗試修改 CSS，但我就是想不通.誰能幫幫我?

I tried tinkering with the CSS, but I just can't figure it out. Could anyone please help me?

推薦答案

Remove overflow: hidden; from .flex-direction-nav a:

Remove overflow: hidden; from .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; 
}

如果您需要更改或刪除上一個(gè)"和下一個(gè)"默認(rèn)顯示的文本，請(qǐng)?jiān)诖颂幉殚啿寮倪x項(xiàng)文檔根據(jù)您的需要定制":http://www.woothemes.com/flexslider/

If you need to alter or remove the text that shows up by default for 'Previous' and 'Next', consult the options documentation 'Tailor to Your Needs' for the plugin here: http://www.woothemes.com/flexslider/

之后，只需更新以下設(shè)置:

Following that, just update the settings for:

prevText: "Previous",    //String: Set the text for the "previous" directionNav item
nextText: "Next",????????//String: Set the text for the "next" directionNav item

這篇關(guān)于Flexslider 箭頭未正確顯示的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！