Question

我试图模仿.table-hover上的twitter-bootstrap-3 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>

引导列表组条带冲突与悬停

1 个答案: