Question

我的HTML格式为：

<ul>
    <li class="tile">
        <span class="hidden"></span>
        <span class="hidden"></span>
    </li>
    <li class="tile">
        <span class="hidden"></span>
        <span class="hidden"></span>
    </li>
</ul>

如果li上有tile课程，我需要第一个span课程hidden来删除该课程。当鼠标移开时，需要再次隐藏该跨度。到目前为止，我有这个：

$(".tile").hover(function () {
    $(this + ":first-child").removeClass("hidden");
}, function () {
    $(this + ":first-child").addClass("hidden");
});

然而，这使得所有li与班级tile一起行动，而不仅仅是那个徘徊的行动。第二个函数将hidden类赋给标题中的样式表引用！

我做错了什么？我以为我正确使用了this。

Answer 1

不要尝试将this与其他选择器连接起来，因为它不会像您认为的那样。

改为使用.find()：

$(".tile").hover(function () {
    $(this).find(":first-child").removeClass("hidden");
}, function () {
    $(this).find(":first-child").addClass("hidden");
});

Answer 2

您的悬停功能应为：

$(".tile").hover(function () {
    $(this).find("span").first().removeClass("hidden");
}, function () {
    $(this).find("span").first().addClass("hidden");
});

仅选择悬停元素而不是所有匹配元素

2 个答案: