如何在悬停模式垫表

Question

我有一个垫桌的设计。找到附加的图像。悬停时，行应该看起来像附加的图像

1：台面图形图像

我做了什么

应用程序stackblitz链接：

***Mycode***
**table component.css**

        table {
        width: 100%;
        border-collapse: 'collapse' !important;
        font-family: 'biennale-regular';
        font-style: normal;
        font-weight: normal;
        background-color: white;
    }

    tr.mat-row {
        background-color: #f6f6f6;
        height: 39px !important;
        border-top: 9px solid #fff;
        border-bottom: 9px solid #fff;
        border-left: none;
        border-right: none;
    }

    td.mat-cell {
        font-size: 12px;
        color: #001C35;
        padding-top: 9px;
        padding-bottom: 9px;
    }

    th.mat-header-cell {
        border-bottom-style: none;
        color: #001C35;
        font-weight: bold !important;
    }

    td.mat-cell:first-child {
        border-left: 2px;
        border-bottom-left-radius: 13px;
        border-top-left-radius: 13px;
    }

    td.mat-cell:last-child {
        border-right: 2px;
        border-bottom-right-radius: 13px;
        border-top-right-radius: 13px;
    }

Answer 1

首先，如果你能提供你的问题的闪电战，这真的很有帮助。这样，我们就可以查看您的代码，并尝试一些东西，而无需重新创建您的应用程序。

其次，角度材质将其样式保留在其组件中，因此通常需要使用：：ng deep。

最后，CSS中没有：悬停选择器。假设您实际与材质选择器连接，您将需要以下内容：

tr.mat-row:hover {
    border: 1px solid blue;
    border-radius: 10px;
}