Question

I got a table with some top and bottom borders.. But the :hover class doesn’t work as I want it to..

In some cases I got an extra class on the TD’s and when the mouse is moved over only the bottom border changes

I have made a jsfiddle here to demonstrate:

td {
    border:1px solid #99bfe3;
    border-left:0px;
    border-right:0px;
    padding:5px;
    vertical-align:top;
}

tr:hover > td {
    background:#cae5fd;
    border:1px #375877 solid;
    border-left:0px;
    border-right:0px;
}

td.test {
    background:#9deea4;
    border:1px #51a357 solid;
    border-left:0px;
    border-right:0px;
}

tr:hover > td.test {
    background:#7fda86;
    border:1px #265c2b solid;
    border-left:0px;
    border-right:0px;
}

<table>
    <tr>
        <td>cell</td>
        <td>cell</td>
    </tr>
    <tr>
        <td class="test">cell</td>
        <td>cell<br>hmm</td>
    </tr>
    <tr>
        <td class="test">cell</td>
        <td class="test">cell<br>hmm</td>
    </tr>
    <tr>
        <td>cell</td>
        <td>cell</td>
    </tr>
    <tr>
        <td>cell</td>
        <td>cell</td>
    </tr>
    <tr>
        <td>cell</td>
        <td>cell<br>hmm</td>
    </tr>
</table>

http://jsfiddle.net/VRv3f/

How can you make both the top and bottom borders to react on :hover?

Answer 1

This might be considered cheating, but you could use a SPAN (or DIV) inside your TD.test and then deploy negative margins.

NOTE: This will break if two cells have different heights, since the SPAN/DIV will not expand to the new calculated height of the row. The below example gets around this by setting the border on the bottom of the cell (which works fine), and then setting the top border on the negative margin SPAN within it, while zeroing out the padding top, left and right on the cell and adding it to the SPAN.

tr > td {
    padding: 5px;
    border-bottom: 1px solid #99bfe3;
    vertical-align: top;
}

tr:hover {
    background: #cae5fd;
}

td.test {
    background: #b1f0b6;
}

tr:hover > td.test {
    padding: 0 0 5px 0;
    border-bottom: 1px solid black;
    background: #8de194;
}

tr:hover > td.test span {
    display: block;
    margin: -1px 0;
    position: relative;
    padding: 5px 5px 1px;
    border-top: 1px solid black;
}

<table>
    <tr>
        <td>cell</td>
        <td>cell</td>
    </tr>
    <tr>
        <td class="test"><span>cell</span></td>
        <td>cell<br>hmm</td>
    </tr>
    <tr>
        <td class="test"><span>cell</span></td>
        <td class="test"><span>cell<br>hmm</span></td>
    </tr>
    <tr>
        <td>cell</td>
        <td>cell</td>
    </tr>
    <tr>
        <td>cell</td>
        <td>cell</td>
    </tr>
    <tr>
        <td>cell</td>
        <td>cell<br>hmm</td>
    </tr>
</table>

http://jsfiddle.net/82bRU/18/