Show element next to table row on hover

css, html, jquery

Solution

You can do it without any JavaScript - with just plain HTML like this:

CSS

table {
    margin:     100px;
}

td {
    position:   relative;
}

span.arrow {
    display:    none;
    width:      20px;
    height:     20px;
    position:   absolute;
    left:       -20px;
    border:     1px solid red;
}

tr:hover span.arrow {
    display:    block;
}

HTML

<table>
    <tr>
        <td>
            <span class="arrow"></span>
            Some content
        </td>
        <td>Some content</td>
    </tr>
</table>

This is just the basic idea. Keep in mind, that the arrow must have a "connection" with the table row, otherwise they will hide again, when you move towards them (because than you would leave the `:hover` of the `<tr>` - that's why the `width` and the amount of `left` are the same in the example).

DEMO

jsFiddle

NOTE

I only tested this in Safari. For all other browsers simply move `position: relative;` from `<tr>` to `<table>`:

table {
    margin:100px;
    position: relative;
}

Problem

What I'm trying to implement is when someone hovers over a table row, I want to show up-and-down arrows on the left side of the table (outside of the table). What is the best way to implement this using html/css or jquery?

Original source