Problem with jQuery selectors

I have this table:

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

and I want to make the child disappear when I hover over the row. So I made this but it selects all of the other actions as well:

$(".row").hover(
        functi开发者_如何学JAVAon () {
            $(".action").css("visibility","hidden");
        },
        function () {
            $(".action").css("visibility","visible");
        }
    ); 

Am I missing something?

You can also do this in pure CSS.

tr.row .action {
    display:block;
}

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

Simply look for the class within the .row parent element by using $(this):

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

Here's a working jsFiddle.

Right now, you're telling every element with the class "action" to disappear when you hover over a row. Instead, you can use this to refer to the row that the cursor passed over, then find its child "action" element and hide it.

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