:hover 和 TD 边界

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 做出反应？

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/

Answer 2

如果我像这样使用border-collapse:separate;，它会起作用

<table>
    <tr>
        <td>row</td>
    </tr>
    <tr>
        <td class="test">row</td>
    </tr>
    <tr>
        <td>row</td>
    </tr>
</table>

css

table{
    border-collapse:separate;
}

td {
    padding:5px;
    border-left: 1px solid white;
    border-right: 1px solid white;
    border-bottom:1px solid #99bfe3;
    border-top: 1px solid #99bfe3;
    border-collapse:separate;
}

td:hover {
    background:#cae5fd;
    border-bottom:1px solid black;
    border-top: 1px solid black;
}

td.test {
    background:#b1f0b6;
}

示例：http://jsfiddle.net/jasongennaro/82bRU/13/

仅供参考...您的一些trs 也没有关闭。