tr:hover & tr:nth-child(odd ~ even) does not work together

I wanted to highlight the table row on hover. So I've used the following CSS rule,

.my-table tbody tr:hover{
  background-color: #BFC0C2;
}

It worked well alone. Later I've included the CSS rule to make the different background color for odd and even rows of the table,

.my-table tbody tr:nth-child(odd){
  background: #FFFFFF;
}
.my-table tbody tr:nth-child(even){
  background: #f2f2f3;
}

Now the odd and even rows are having differnt background color But on hover the row is not getting highlighted. Can't I use both of them together? Here is the plunker.