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/

如何让顶部和底部边框做出反应：悬停？

Answer 1

这可能被视为作弊，但您可以在SPAN内使用DIV（或TD.test），然后部署负边距。

注意：如果两个单元格具有不同的高度，则会中断，因为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/

Fyi ......你的一些tr也没有关闭。

：悬停和TD边界

2 个答案: