javascript - 当我用 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

我相信您应该$.hover()在（容器）上使用该功能<li>，而不仅仅是<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')

我img从 var 中删除了 ，所以当我将鼠标悬停在整个函数上时，li我的函数工作而不是仅仅悬停在img.

但我仍然无法span在第一张图片中出现？

Answer 3

您应该像这样处理两者的包装：

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