Проблема с селекторами jQuery

Question

У меня есть эта таблица:

<table>
    <tr class="row">
        <td>Title
            <div class="action">hello</div>
        </td>    
        <td>Rorow</td>
    </tr>
    <tr class="row">
        <td>Title
            <div class="action">hello</div>
        </td>  
        <td>Rorow</td>
    </tr>
</table>

, и я хочу, чтобы ребенок исчез, когда я наведусь на строку.Я сделал это, но он также выбирает все остальные действия:

$(".row").hover(
        function () {
            $(".action").css("visibility","hidden");
        },
        function () {
            $(".action").css("visibility","visible");
        }
    ); 

Я что-то упустил?

Answer 1

Просто найдите класс в родительском элементе .row, используя $(this):

$(".row").hover(
    function () {
        //$(this) refers to the row that received the hover event
        $(this).find(".action").hide();
    },
    function () {
        $(this).find(".action").show();
    }
);

Вот рабочий jsFiddle .

Answer 2

Вы также можете сделать это на чистом CSS.

tr.row .action {
    display:block;
}

tr.row:hover .action {
    display:none;
}

Answer 3

Прямо сейчас, вы говорите каждому элементу с классом "действие" исчезать при наведении курсора на строку. Вместо этого вы можете использовать this для ссылки на строку, через которую прошел курсор, затем найти его дочерний элемент "action" и скрыть его.

$(".row").hover(
    function () {
        $(this).find(".action").hide();
    },
    function () {
        $(this).find(".action").show();
    }
);