CSS表将鼠标悬停在一种颜色/边框上，而将悬停在另一种颜色/边框上则不重要

我有以下fiddle。

编辑:具有行寄宿生样式:

table,th,td
{
    border:2px solid black;
    border-collapse:collapse;
}
tr:hover td
{
    background-color:grey;
    border-top: 2px solid rgb(10, 0, 255);
    border-bottom: 2px solid rgb(10, 0, 255);
}
td:hover
{
    background-color:rgb(214,214,214) !important;
    border:2px solid red !important;
    border-top: 2px solid red;
    border-bottom: 2px solid red;
}

我要做的是突出显示ROW和CELL。最初曾考虑过使用十字准线，但列背景着色将需要JavaScript，我暂时将避免使用它。

在此上，希望ROW:hover背景颜色偏暗并强调边框。

然后td:hover为不同的颜色，并且边框的强调也不同。

在Chrome中 checkin ，未在Firefox中 checkin 。

问题:需要使用!important。
单元格的左边框和上边框是否不着色为红色？

因此，有没有一种方法可以不使用important!来编写CSS并在TD单元格上更正边框样式？

最佳答案

您可以只使用CSS(不使用Javascript)来完成您的十字准线想法。使用::before和::after伪元素进行突出显示。 Firefox使用此方法存在一个小问题，因此我为此编写了一个修复程序。
border-collapse: collapse使<tds>上的边框行为异常。而是将边界放在<trs>和<cols>上。 border-collapse: collapse也可以消除边缘。为了解决这个问题，您必须发挥创造力，并在所有外部<tds>和<ths>上绘制一个额外的边框。甚至更陌生，它在顶部“吃”一个像素，在底部“吃”两个像素。因此，您需要在顶部使用3px以获得2px边框，并在底部需要4px以获得2px边框。

演示:

CSS:

table {
    border-collapse: collapse;
    overflow: hidden;
    z-index: 1;
}
td, th, .row, .col, .ff-fix {
    cursor: pointer;
    padding: 10px;
    position: relative;
}
tr:last-child td {
    border-bottom: 4px solid black;
}
tr, col {
    border: 2px solid black;
}
th {
    border-top: 3px solid black;
}
th:last-child, td:nth-child(3n) {
    border-right: 4px solid black;
}
td:first-child, th:first-child {
    border-left: 3px solid black;
}
td:hover {
    border: 2px solid red;
}
td:hover:first-child {
    border-left: 3px solid red;
}
td:hover:nth-child(3n) {
    border-right: 4px solid red;
}
tr:last-child td:hover {
    border-bottom: 4px solid red;
}
td:hover::before,
.row:hover::before,
.ff-fix:hover::before {
    background-color: #ffa;
    content: '\00a0';
    height: 100%;
    left: -5000px;
    position: absolute;
    top: 0;
    width: 10000px;
    z-index: -1;
}
td:hover::after,
.col:hover::after,
.ff-fix:hover::after {
    background-color: #ffa;
    content: '\00a0';
    height: 10000px;
    left: 0;
    position: absolute;
    top: -5000px;
    width: 100%;
    z-index: -1;
}

HTML:

<table>
    <col /><col /><col />
    <tr>
        <th class="col">First Name</th>
        <th class="col">Middle Name</th>
        <th class="col">Last Name</th>
    </tr>
    <tr>
        <td>Peter</td>
        <td>Jeffery</td>
        <td>Griffin</td>
    </tr>
    <tr>
        <td>Lois</td>
        <td>Marie</td>
        <td>Griffin</td>
    </tr>
    <tr>
        <td>Margie</td>
        <td>Ann</td>
        <td>Thatcher</td>
    </tr>
</table>

脚本:

function firefoxFix() {
    if ( /firefox/.test( window.navigator.userAgent.toLowerCase() ) ) {
        var tds = document.getElementsByTagName( 'td' ),
            ths = document.getElementsByTagName( 'th' );
        for( var index = 0; index < tds.length; index++ ) {
            tds[index].innerHTML = '<div class="ff-fix">' + tds[index].innerHTML + '</div>';
        };
        for( var index = 0; index < ths.length; index++ ) {
            ths[index].innerHTML =
                  '<div class="' + ths[index].className + '">'
                + ths[index].innerHTML
                + '</div>';
            ths[index].className = '';
        };
        var style = '<style>'
            + 'td, th { padding: 0 !important; }'
            + 'td:hover::before, td:hover::after { background-color: transparent !important; }'
            + '</style>';
        document.head.insertAdjacentHTML( 'beforeEnd', style );
    };
};

firefoxFix();

关于CSS表将鼠标悬停在一种颜色/边框上，而将悬停在另一种颜色/边框上则不重要，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15269921/