Выбирайте только наведенные элементы вместо всех соответствующих элементов

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");
});