Bootstrap list group悬停的条纹冲突

Question

我试图模拟twitter-bootstrap-3.table-hover和table-striped on 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>