I've got a table of items being displayed from a database using HTML/jQuery. In the last column of the table, I have a few action links (delete, edit, etc...). I only want these links to be visible when the mouse is hovering over the row, so I setup the table like this:

```
<table class="data" ...>
    <tr>
        <td>...</td>
        <td>...</td>
        <td>...</td>
        <td class="actions>...</td>
    </tr>
</table>

```

And my CSS looks like:

```
table.data td.actions { visibility: hidden; }
table.data tr:hover td.actions { visibility: visible; }

```

This works great as long as I hover over any of the other columns in the row first. If I move my mouse to over over where the actions column should be, it never shows up. I'm guessing because the column is hidden, it doesn't trigger the row's hover event. How can I fix this?

Example: <http://jsfiddle.net/wB5KC/>