Home Ask Login Register

Developers Planet

Your answer is one click away!

Hongbo Miao February 2016

Cannot change the color of the cell of table when hover

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">

.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.


Hongbo Miao February 2016

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.

Post Status

Asked in February 2016
Viewed 3,978 times
Voted 12
Answered 1 times


Leave an answer

Quote of the day: live life