Cannot change the color of the cell of table when hover

Question

I am using angular2-meteor with ng2-bootstrap. I try to change color when I hover on the cell of 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;
  }
}

The code runs well in the pure Bootstrap, you can see here.

But when I use angular2 and meteor, the CSS code won't work any more.

Answer 1

I found the problem, my project is a angular2-meteor project. At the same time, I am using Sass for Meteor.

When I use styles: [...], Sass for Meteor won't compile it.

There are two solutions, both work:

1. create another file XXX.scss, and change to use styleUrls: ['XXX.scss']

2. use CSS instead of SCSS codes in styles: [...].

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.