Question

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(
        function () {
            $(".action").css("visibility","hidden");
        },
        function () {
            $(".action").css("visibility","visible");
        }
    ); 

Am I missing something?

Answer 1

You can also do this in pure CSS.

tr.row .action {
    display:block;
}

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