使用jQuery將圖像懸停在圖像上時，如何保持跨度？

Question

當我將鼠標懸停在圖像上時，我有這段代碼可以工作，但是當我將鼠標懸停在跨度上時，它又回到了不透明度0。

    $(document).ready(function() {
        var $img = $('.carousel-inner li img'),
            $text = $('.carousel-inner li span');

            $img.hover(function() {
                $text.stop().animate({
                    opacity: 1,
                    height: '75px'
                }, 500);
                },function() {
                    $text.stop().animate({
                    opacity: 0,
                    height: '0px'
                }, 500);
            });
    });

您可以在此處查看示例

Answer 1

我相信您應該在<li> （容器）上使用$.hover()函數，而不僅僅是<img> 。

var $li = $('.carousel-inner li')

...

$li.hover(function() { ... }

您可以在這里看到效果： http : //jsbin.com/EGOsuYi/1/

Answer 2

我知道了。 代替

var $img = $('.carousel-inner li img'),

我放

var $img = $('.carousel-inner li')

我從var中刪除了img ，所以當我將鼠標懸停在整個li我的功能就起作用了，而不僅僅是將鼠標懸停在img 。

但是我仍然無法使span出現在第一張圖像中嗎？

Answer 3

您應該這樣處理兩者的包裝：

$('.carousel-inner li').on('mouseenter',function() {
     //show text
});
$('.carousel-inner li').on('mouseleave',function() {
     //hide text
});