Question

I’m trying to add a class so that the span text shows on hover,
but only for that particular image not all images at once.

I can get it to add class to all the spans at once, but when I try to limit it to only the span being hovered nothing happens. The problem seems to be when I add .next(‘span’) – although I don’t know why.

Can anyone tell me what I’m doing wrong here?

    $('.scroller-image').hover(function() {

         $(this).next('span').addClass('hover');
         }, function() {
         $(this).next('span').removeClass('hover');

    });

Here’s the markup:

<div class="scroller-image">
    <span>image title</span>
    <img src="#" alt="#" />
</div>

Answer 1

next() selects the next sibling – not child elements. What you want is this
children()

$(this).children('span')// <-- this find direct children spans

or find()

$(this).find('span')  //<-- this finds all descendent spans