鼠标悬停时的 jQuery 图像 slider 标题

Question

我正在使用bxSlider显示多个图像。现在如何在图像悬停时显示图像阳 ionic 。

我已添加 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 选择器才能作用于除该元素之外的其他元素。