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; 
}

「前へ」と「次へ」にデフォルトで表示されるテキストを変更または削除する必要がある場合は、プラグインのオプション ドキュメント「Tailor to Your Needs」を参照してください: 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

「jquery.flexslider.js」ファイルを開き、"// Primary Controls"1125 行目 (おおよそ) を検索します。あなたが見つけるだろう、

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

ここで、次と前のテキストを削除して、再度保存する必要があります。

これが役立つことを願っています。

于 2015-12-12T06:10:58.487 に答える
0

flexslider CSS (flexslider.css の 70 行目あたり) の「flexslider-icon」のフォント サイズを変更することで、なんとか動作させることができました。

デフォルトでは40pxに設定されているようですが、30pxに変更すると、私が構築している2つのWebサイトで完全に機能しました.

于 2014-04-08T17:08:42.697 に答える
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 に答える