Question

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/

Answer 1

I originally deleted this question, but thought I’d put it back in case someone else found it useful. The solution was to move the links inside a div inside the cell, and toggle the visibility of the div itself, not the cell. Once the cell is always visible, it triggers the row’s hover event, even if there is no visible content. Once the hover event is triggered, the content is shown.