Question

我有一张带有＆lt; hr＆gt;，标题和正文的表格。我将悬停效果放在整个表格上，但是对于＆lt; hr＆gt;，只有当鼠标悬停在线条上时鼠标悬停在表格上才会改变颜色。一旦鼠标像其他人一样接触到桌子，我就需要它来改变颜色。我尝试了各种各样的东西，但似乎都没有。

如何获得＆lt; hr＆gt;当鼠标移到桌子上的任何地方时，将颜色改变为像桌子其他部分一样的白色？ JSFiddle

HTML：

<body>
    <table>
        <thead>
            <tr>
                <td><hr /></td>
            </tr>
        </thead>
        <thead>
            <tr>
                <td><a href="#">This is the Header</a></td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><a href="#">some row content</a></td>
            </tr>
        </tbody>
    </table>
</body>

CSS：

hr{
border:1px solid;
float:left;
align:left;
width:30%;
background-color:#991f33;
color:#991f33;
}
hr:hover{
background-color:#fff;
color:#fff;
}

table {
    border:0;
    background-color:#dcdcdc;
    text-align:left;
    text-decoration:none !important;
    padding:20px;
}

thead tr a{
    color: #911f33;
}

tbody tr{
    font-size:10px;
    line-height:19px;
    color: #911f33;
}

table:hover, table:hover a{
    color:#fff;
    background-color:#911f33;
}

tr a{
    color:#000;
}

Answer 1

<td><hr id="hrr"/></td>

css是

table:hover #hrr
{
      border:1px solid blue;
}

悬停在表格中的<hr />上的效果

1 个答案: