时间戳

首页 > 解决方案 > 如果表格单元格具有特定的背景颜色，则 CSS 悬停不适用于表格单元格

html - 如果表格单元格具有特定的背景颜色，则 CSS 悬停不适用于表格单元格

问题描述

我:hover已经使用 CSS 对表格的行设置了效果。唯一的问题是悬停效果不起作用，如果表格单元格具有特定的背景颜色，例如绿色。#96c7ef在示例代码中，这意味着当您将鼠标移到第三列时，第三列不会将背景颜色从绿色（分别为红色）更改为。（没关系，第一行也不会改变背景颜色。这是故意跳过使用<thead>的。）在没有任何背景颜色的其他单元格上，悬停有效。

page.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="pragma" content="no-cache">
    <link rel="stylesheet" href="./basic.css" type="text/css">
</head>

<body>
<table class="multidata" style="table-layout: fixed; width: 100%" cellspacing="0" border="0">
    <thead>
        <tr>
            <th style="width: 10%">ID</th>
            <th style="width: 10%">Name</th>
            <th style="width: 10%">Status</th>
        </tr>
    </thead>

    <tr>
        <td class="td1" style="color:grey"><i>1</i></td>
        <td class="td1" style="color:grey"><i>First</i></td>
        <td class="tdX" align="center"><b>Disabled</b></td>
    </tr>

    <tr>
        <td class="td2" style="color:grey"><i>2</i></td>
        <td class="td2" style="color:grey"><i>Second</i></td>
        <td class="tdY" align="center"><b>Active</b></td>
    </tr>
</table>
</body>
</html>

基本的.css

.multidata td,.multidata th {
    border: 2px solid #808080;
    padding: 5px 5px;
}

.multidata tbody>tr:hover {
    background-color:#96c7ef!important;
}

.tdX {
    background-color:red;
    font-weight:bold;
}

.tdY {
    background-color:green;
    font-weight:bold;
}

如果将两个单元格 (tdX, tdY) 的样式声明指定为内联样式，则悬停效果也具有相同的行为。我指定了！important，但没有任何变化。

我的代码有什么问题？

标签： htmlcsshtml-tablehover

解决方案

如果你说只是 tr hover 那么你可以改变 tr 背景，但是 td 有背景并且在 tr 上。所以你应该说hovered tr的td。所以只需添加

.multidata  tbody>tr:hover td {
    background-color:#96c7ef!important;
}


.multidata td,.multidata th {
    border: 2px solid #808080;
    padding: 5px 5px;
}

.multidata  tbody>tr:hover td {
    background-color:#96c7ef!important;
}
.tdX {
    background-color:red;
    font-weight:bold;
}

.tdY {
    background-color:green;
    font-weight:bold;
}
<table class="multidata" style="table-layout: fixed; width: 100%" cellspacing="0" border="0">
    <thead>
        <tr>
            <th style="width: 10%">ID</th>
            <th style="width: 10%">Name</th>
            <th style="width: 10%">Status</th>
        </tr>
    </thead>

    <tr>
        <td class="td1" style="color:grey"><i>1</i></td>
        <td class="td1" style="color:grey"><i>First</i></td>
        <td class="tdX" align="center"><b>Disabled</b></td>
    </tr>

    <tr>
        <td class="td2" style="color:grey"><i>2</i></td>
        <td class="td2" style="color:grey"><i>Second</i></td>
        <td class="tdY" align="center"><b>Active</b></td>
    </tr>
</table>

推荐阅读