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

【问题标题】：jQuery image slider caption on mouse hover鼠标悬停时的jQuery图像滑块标题
【发布时间】：2013-10-17 08:12:14
【问题描述】：

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

有什么想法或建议吗？谢谢。

【问题讨论】：

只需添加 CSS 即可完成您想要的操作。即最初将标题设置为隐藏，当在任何元素上检测到鼠标悬停时，显示标题。

标签： jquery css image-gallery bxslider

【解决方案1】：

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

.bx-caption{
    display:none;
}

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

Fiddle Link

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

【讨论】：

【解决方案2】：

您可以设置 captions 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/

【讨论】：

为什么要将 jQuery mouseenter 和 mouseleave 绑定添加到这么多元素，这将不必要地增加被主动跟踪的事件数量。即使这样可行，但这也不是最佳解决方案。
纯 CSS 解决方案更好，唯一的原因是旧的 IE 支持 :hover 伪选择器有问题
IE6 及以下版本使用伪选择器表现出错误行为。现在的插件明确提到不支持IE6及以下。无论如何，我将在我的答案中添加一个明确的消息。谢谢更新。 :)
对于最终的 CSS3 过渡支持caniuse.com/css-transitions，使用 jQuery 不是问题，我找不到更多原因 :-)
大家好，非常感谢您的帮助 :) 你们都站在你这边。

【解决方案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 显示

【讨论】：