javascript - 查找与 jquery 中悬停的元素具有相同父级的所有子级

Question

我有一个主题列表。在每个主题中，我都有一些项目。 当我将鼠标悬停在某个项目上时，我尝试更改该主题的每个项目的颜色。

<div class="subject">
    <div class="item">hello</div>
    <div class="item">hello2</div>
    <div class="item">hello3</div>
</div>

<div class="subject">
    <div class="item">hello</div>
    <div class="item">hello2</div>
    <div class="item">hello3</div>
</div>

如果这样做，它会更改整个页面的所有 .items :

$(".item").hover(function () {
    $(".item").addClass("hovering");
}, function () {
    $(".item").removeClass("hovering");
});

我找不到怎么说“所有与我悬停的项目具有相同父级的 child ”... 谢谢!

Answer 1

将你的 JS 更改为:

$(".item").hover(function () {
    $(this).addClass("hovering");
}, function () {
    $(".item").removeClass("hovering");
});

这是 JSFiddle:http://jsfiddle.net/hZ9zb/