Question

我正在angular2-meteor使用ng2-bootstrap。当我将鼠标悬停在桌子上时，我会尝试改变颜色。

<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项目。与此同时，我正在使用Sass for Meteor。

当我使用styles: [...]时，Sass for Meteor将无法编译它。

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

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

P.S。这些天我遇到了很多奇怪的风格问题，现在都是因为   这个问题。

例如，SCSS支持//进行评论，但CSS不支持。所以，当我   在styles: [...]中编写代码，//之前的CSS代码运行良好，   //后的代码无效。我没有收到任何错误   浏览器和我的编译器。

希望这可以帮助那些遇到类似风格问题的人。

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

1 个答案: