How can I make a span stay when I hover over an image with jquery?

Question

I have this code that works when I hover over the image but when I hover over the span it goes back to opacity 0. Also the span does not appear in the first image?

    $(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);
            });
    });

You can view an example HERE

Answer 1

I believe you should use the $.hover() function on the <li> (the container), not only the <img> .

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

...

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

You can see the effect here: http://jsbin.com/EGOsuYi/1/

Answer 2

I got it to work. Instead of

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

I put

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

I removed the img from the var so when I hover over the whole li my function worked instead of just hovering over the img .

But I still can't get the span to appear in the first image?

Answer 3

You should address the wrapper of both like this:

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