2

複数の画像を表示するためにbxSliderを使用しています。画像ホバーで画像陽イオンを表示する方法。

追加しましcaptions: trueたが、ユーザーが画像にカーソルを合わせたときに表示したいです。

HTML コード:

<ul class="bxslider">
    <li>
        <img src="http://bxslider.com/images/730_200/hill_trees.jpg" title="Sample 1" />
    </li>
    <li>
        <img src="http://bxslider.com/images/730_200/me_trees.jpg" title="Sample 2" />
    </li>
    <li>
        <img src="http://bxslider.com/images/730_200/houses.jpg" title="Sample 3" />
    </li>
    <li>
        <img src="http://bxslider.com/images/730_200/tree_root.jpg" title="Sample 4" />
    </li>
    <li>
        <img src="http://bxslider.com/images/730_200/hill_fence.jpg" title="Sample 4" />
    </li>
    <li>
        <img src="http://bxslider.com/images/730_200/trees.jpg" title="Sample 5" />
    </li>
</ul>

JS コード:

$('.bxslider').bxSlider({
    auto: true,
    minSlides: 1,
    pause: 4000,
    moveSlides: 1,
    maxSlides: 4,
    slideWidth: 260,
    slideMargin: 13,
    touchEnabled: true,
    pager: false,
    controls: false,
    captions: true,
    autoHover: true
});

私の JSFiddle:デモ

アイデアや提案はありますか？ありがとう。

4

3 に答える 3

2

jQuery を大量に操作したり元の CSS ファイルを編集したりする代わりに、次の CSS をコードに追加することをお勧めします。

.bx-caption{
    display:none;
}

.bx-wrapper li:hover .bx-caption{
    display:block;
}

フィドルリンク

注: IE では、:hover セレクターが要素以外の要素で動作するように a を宣言する必要があります。

于 2013-10-17T08:22:58.363 に答える
0

bx-slider css を追加し、いくつかの変更を加えました。 http://jsfiddle.net/Yq3RM/288/

.bx-wrapper .bx-caption {
    position: absolute;
    bottom: -100%;
    left: 0;
    background: #666\9;
    background: rgba(80, 80, 80, 0.75);
    width: 100%;
    /*additional styles*/
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

.bxslider li:hover .bx-caption{
    bottom:0
}

ご覧のとおり、キャプションはスライドの外に設定され、ホバーすると純粋な CSS で表示されます

于 2013-10-17T08:21:32.723 に答える