css - :hover and TD borders

Question

我得到了一个带有顶部和底部边框的表格。但是 :hover 类没有像我希望的那样工作。

在某些情况下，我在 TD 上得到了一个额外的类，当鼠标移过时，只有底部边框发生变化

我在这里做了一个jsfiddle来演示:

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/

如何使顶部和底部边框都对 :hover 使用react？

Answer 1

这可能被认为是作弊，但您可以在 TD.test 中使用 SPAN(或 DIV)，然后部署负边距.

注意:如果两个单元格的高度不同，这将中断，因为 SPAN/DIV 不会扩展到新计算的高度该行。下面的示例通过在单元格底部设置边框(效果很好)来解决这个问题，然后在其中的负边距 SPAN 上设置顶部边框，同时将填充顶部置零，在单元格上左右移动并将其添加到 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/