Question

使用bootstrap 3，我已经自定义了一个列表组：

<div class="list-group">
  <a class="list-group-item list-group-item-mine"href="/path"><strong>Item 1</strong></a>
  <a class="list-group-item list-group-item-mine"href="/path"><strong>Item 2</strong></a>   
  <a class="list-group-item list-group-item-mine"href="/path"><strong>Item 3</strong></a>                   
</div>

CSS

.list-group-item-mine {
  background-color: #f1f9fb;
  border-top: 1px solid #0091b5;
  border-left-color: #fff;
  border-right-color: #fff;
}

.list-group-item-mine a:hover {
  background-color: red;

}

问题是，当悬停时，列表组项目仍默认为灰色，而我需要它们变为红色。我怎样才能解决这个问题？

Answer 1

<table>
  <tr>
    <td><a href="#">Accounting and Information Systems</a></td>
    <td><a href="#">Civic and Community Engagement</a></td>
    <td><a href="#">Health Sciences</a></td>
    <td><a href="#">Physical Therapy</a></td>
  </tr>
</table>

https://jsfiddle.net/raj_mutant/6b4zzqab/3/

Answer 2

在父.list-group-mine中使用您的自定义类而不是在子级上...它会让您更好地控制内部元素的样式

Stack Snippet

.list-group-mine .list-group-item {
  background-color: #f1f9fb;
  border-top: 1px solid #0091b5;
  border-left-color: #fff;
  border-right-color: #fff;
}

.list-group-mine .list-group-item:hover {
  background-color: red;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="list-group list-group-mine">
  <a class="list-group-item" href="/path"><strong>Item 1</strong></a>
  <a class="list-group-item" href="/path"><strong>Item 2</strong></a>
  <a class="list-group-item" href="/path"><strong>Item 3</strong></a>
</div>

Answer 3

将.list-group-item-mine a:hover {更改为.list-group-item-mine:hover {

a 元素不是 list-group-item-mine 类的子元素，因此该类未应用。

如何在bootstrap中自定义list-group-item颜色？

3 个答案: