Question

我试图在一行中添加一个盒子阴影，当它悬停时有一个高亮颜色。我希望盒子阴影和高光颜色仅在悬停时显示。该行分为主，线程，帖子等。我可以将效果应用于各个组件但不能在我的生活中找出如何对整个行进行操作。我使用Chrome但需要大多数浏览器支持的代码。

非常感谢您的帮助。

Answer 1

表行（<tr>）元素具有特殊的先天显示属性（display:table-row），有助于创建表的结构。这种显示类型的性质可以防止许多类型的样式，因为它被认为是＆＃34;结构＆＃34;标签而不是＆＃34;显示＆＃34;标签

您可以覆盖显示类型，然后根据需要设置显示属性。请注意，覆盖显示类型可能会对表的外观产生意想不到的副作用，但通常可以通过将其设置为先前的样式（更改边距，填充等）来减轻这些副作用。

我在下面添加了一个示例，它将显示类型更改为＆＃34; block＆＃34;，然后在悬停时将高亮显示和框阴影应用于每一行。这应该适用于任何支持box-shadow（here are the major ones）的浏览器。

＆＃13;

tr {
    display: block;
}
tr:hover {
    box-shadow: 0 0 5px #000;
    background-color: #F8DE7E;
}

＆＃13;

<table>
    <tr>
        <td>a</td> <td>b</td> <td>c</td>
    </tr>
    <tr>
        <td>1</td> <td>2</td> <td>3</td>
    </tr>
    <tr>
        <td>a</td> <td>b</td> <td>c</td>
    </tr>
    <tr>
        <td>1</td> <td>2</td> <td>3</td>
    </tr>
</table>

＆＃13;

突出显示的行上的框阴影

1 个答案: