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

我建议您将以下 CSS 添加到代码中，而不是繁重的 jQuery 操作或编辑原始 CSS 文件：

.bx-caption{
    display:none;
}

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

小提琴链接

注意：在 IE 中，必须为 :hover 选择器声明 a 才能作用于该元素以外的其他元素。

于 2013-10-17T08:22:58.363 回答
1

您可以将标题设置为 true 选项并将标题跨度类的可见性设置为无。

比 mouseenter 和 mouseleave 事件显示/隐藏标题元素。

代码：

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

$(".bxslider li").mouseenter(function () {
    $(this).find(".bx-caption").fadeIn();
})

$(".bxslider li").mouseleave(function () {
    $(this).find(".bx-caption").fadeOut();
});

请记住将其添加到您的 css 以最初隐藏标题：

.bx-caption {
    display: none;
}

演示：http: //jsfiddle.net/IrvinDominin/HsDY9/

于 2013-10-17T08:24:31.350 回答
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 回答