悬停时无法更改 table 单元格的颜色

Question

我正在使用 angular2-meteor with ng2-bootstrap。当我将鼠标悬停在 table.

的单元格上时，我尝试更改颜色

<table class="table table-hover table-bordered">
    <thead>
        <td>header1</td>
        <td>header2</td>
        <td>header3</td>
    </thead>
    <tbody>
        <tr>
            <td>Lorem</td>
            <td>Aut</td>
            <td>Ieleniti</td>
        </tr>
        <tr>
            <td>Lorem</td>
            <td>Esse</td>
            <td>Ullam</td>
        </tr>
    </tbody>
</table>



.table-hover > tbody > tr {
  &:hover {
    > td {
      background-color: #FFFFFF;
    }
    > th {
      background-color: #FFFFFF;
    }
  }
  > td:hover {
    background-color: #f5f5f5 !important;
  }
}

纯Bootstrap代码运行良好，可以看到here.

但是当我使用 angular2 和 meteor 时，CSS 代码将不再起作用。

Answer 1

我发现问题了，我的项目是angular2-meteor project. At the same time, I am using Sass for Meteor.

当我使用 styles: [...] 时，Meteor 的 Sass 不会编译它。

有两种解决方案，都有效：

创建另一个文件XXX.scss，并改为使用styleUrls: ['XXX.scss']
使用CSS代替styles: [...]中的SCSS代码。

P.S. These days I met a lot of weird style problems, now it is all because of this problem.

For example, SCSS supports // to comment, but CSS not. So when I write codes in styles: [...], CSS codes before // work well, the codes after // won't work. And I didn't get any error in browser and my compiler.

Hope this can help people who met similar style problems.

悬停时无法更改 table 单元格的颜色

Cannot change the color of the cell of table when hover

ng2-bootstrap

angular2-meteor

angular