Question

我正在尝试添加一个类，以便在悬停时显示范围文本但只针对那个特定的图像而不是所有的图像。

我可以让它同时为所有跨度添加类，但当我尝试将其限制为仅悬停的跨度时，没有任何反应。问题似乎是当我添加.next（'span'）时 - 虽然我不知道为什么。

谁能告诉我这里我做错了什么？

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

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

    });

这是标记：

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

Answer 1

next()选择下一个兄弟元素 - 而不是子元素。你想要的是这个 children()

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

或find()

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

Answer 2

.next()找到兄弟姐妹，而不是孩子。试试$(this).children('span')

Answer 3

您可以使用.toggleClass()并通过提供this作为选择器的上下文来缩短您的代码。像这样：

$('.scroller-image').hover(function(e) {
    $('span', this).toggleClass('hover', e.type === "mouseenter");
});

Answer 4

您不需要JavaScript。 CSS可以这样做：

.scroller-image:hover span {
    /* the styles from your .hover class */
}

现场演示： http://jsfiddle.net/VbZ2G/

Answer 5

您是否尝试将“悬停”类添加到正在悬停的div的子级的范围内？我认为.next()是兄弟姐妹，为什么不试试

.children('span')

无法让.next（）工作

5 个答案: