Question

我正在使用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：Demo

有任何想法或建议吗？感谢。

Answer 1

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

.bx-caption{
    display:none;
}

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

<强> Fiddle Link

注意：在IE中，必须为：hover选择器声明a，以处理除元素之外的其他元素。

Answer 2

您可以将标题设置为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/

Answer 3

我添加了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显示

鼠标悬停时的jQuery图像滑块标题

3 个答案: