CSS表格tr悬停一个颜色/边框，td悬停另一个颜色/边框，不使用important。

Question

CSS表格tr悬停一个颜色/边框，td悬停另一个颜色/边框，不使用important。

5

我有以下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;
}

我需要突出显示行和单元格。最初想过使用十字线，但是列背景颜色需要JavaScript，我暂时避免使用它。

我希望当鼠标悬停在行上时，行的背景颜色变深，边框更加突出。

然后，当鼠标悬停在单元格上时，单元格的颜色会变成另一种颜色，并且边框的强调也不同。

已在Chrome中检查，但未在Firefox中检查。

问题：需要使用!important。单元格的左边框和顶部没有变成红色？

所以，有没有一种方法可以编写CSS而不使用!important，并正确地设置TD单元格的边框样式？

- Maze

我已经从你的fiddle中删除了!important，在我的浏览器(chrome)上它仍然可以正常工作。http://jsfiddle.net/TR8Zg/4/ - Luca

3个回答

1

这里有一个更简单的解决方案：将以下样式设置为所有的table、tr和td元素：

border: 2px inset black;
border-collapse: collapse;
border-spacing: 0;

使用 inset 属性可以制作边框效果。这个属性很有用：

当父元素和子元素都有边框时，使用这种技术可以避免出现两条边框（看起来很丑）。这是因为子元素是在内嵌盒阴影上渲染的，而不是在内嵌盒阴影内部。

参考资料：http://makandracards.com/makandra/12019-css-emulate-borders-with-inset-box-shadows 工作示例：http://jsfiddle.net/TR8Zg/146/ 在 Chrome 上效果很好。但在 IE 和 FireFox 上，内嵌效果会受到影响。因此需要在它们上面找到一些修复方法。

- Joy

1

你的示例运行良好，不需要使用 !important。删除 border-collapse: collapse 即可看到效果(jsfiddle)。

- Morpheus

除了 TR 行上的边框样式未被应用之外，我尝试了 tr:hover td，然后需要在 td:hover 上使用 !important 才能使该样式应用 http://jsfiddle.net/TR8Zg/6/ - Maze

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ThinkingStiff · Accepted Answer

你可以仅使用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();