1

我正在尝试添加一个类，以便跨度文本在悬停时显示，但仅适用于该特定图像，而不是一次所有图像。

我可以让它一次将类添加到所有跨度，但是当我尝试将其限制为仅悬停的跨度时，什么也没有发生。问题似乎出在我添加 .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>
4

5 回答 5

9

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

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

或查找（）

$(this).find('span')  //<-- this finds all descendent spans
于 2012-07-30T16:12:58.340 回答
3

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

于 2012-07-30T16:13:21.903 回答
1

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

$('.scroller-image').hover(function(e) {
    $('span', this).toggleClass('hover', e.type === "mouseenter");
});
于 2012-07-30T16:13:46.420 回答
1

你不需要 JavaScript。CSS 可以做到这一点：

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

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

于 2012-07-30T16:18:15.317 回答
0

您是否尝试将“悬停”类添加到作为悬停 div 的子项的跨度？我.next()想去兄弟姐妹，为什么不试试

.children('span')
于 2012-07-30T16:14:30.360 回答