Bootstrap列表组与hover的条带冲突

Question

我试图模仿Twitter的引导-3 .table-hover与table-striped上list-group.首先,我尝试了以下悬停:

<!-- HTML --!>
<ul class="list-group list-group-hover">
  <li class="list-group-item">...
...
// CSS
ul.list-group.list-group-hover li:hover{
    background: $table-bg-hover;
}

上面的代码工作正常,它会生成悬停在每个列表的项目上.

但是,尝试添加striped像下面的代码一样的表,不起作用,即条带效果只起作用,但悬停不起作用.

<!-- HTML -->

<ul class="list-group list-group-hover list-group-striped">
...

// CSS
ul.list-group.list-group-hover li:hover{
    background: $table-bg-hover;
}
ul.list-group.list-group-striped li:nth-of-type(odd){
    background: $table-bg-accent;
}
ul.list-group.list-group-striped li:nth-of-type(even){
    background: $body-bg;
}

我不知道怎么能把这两种效果,悬停和剥离,与表同时工作？

Answer 1

:hover 需要持续到最后

ul.list-group.list-group-striped li:nth-of-type(odd){
    background: blue;
}
ul.list-group.list-group-striped li:nth-of-type(even){
    background: purple;
}
ul.list-group.list-group-hover li:hover{
    background: red;
}

<ul class="list-group list-group-hover list-group-striped">
  <li>asdf</li>
  <li>asdf</li>
  <li>asdf</li>
  <li>asdf</li>
  <li>asdf</li>
  <li>asdf</li>
  <li>asdf</li>
  <li>asdf</li>
</ul>