-1

我正在使用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 中运行良好，可以看这里。

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

4

1 回答 1

1

我发现了问题，我的项目是一个angular2-meteor项目。同时，我正在使用Sass for Meteor。

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

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

  1. 创建另一个文件XXX.scss，并更改为使用styleUrls: ['XXX.scss']

  2. 在styles: [...].

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

例如，SCSS 支持//评论，但 CSS 不支持。所以当我在 中写代码时styles: [...]，之前的 CSS 代码//可以正常工作，之后的代码//将无法正常工作。而且我在浏览器和编译器中没有收到任何错误。

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

于 2016-02-09T02:43:49.643 回答