Question

My HTML is of the form:

<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>

And when an li with class tile is hovered on I need the first span with class hidden to have that class removed. When the mouse is moved away that span needs to be hidden again. So far I have this:

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

However this makes ALL of the li with class tile do the action, not just the one hovered upon. And the second function gives the hidden class to the style sheet reference in the header!

What am I doing wrong? I thought I used this correctly.

Answer 1

Don’t try to concatenate this with other selectors, as it doesn’t do what you think it does.

Use .find() instead:

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