html - 悬停时列表项不变

Question

使用 Bootstrap 4，我很难在悬停时定位列表项。我正在尝试将文本的默认颜色设置为灰色，但在悬停时，将文本设置为常规黑色，在事件状态下，将文本设置为白色、粗体，并为列表项的不同状态设置背景色.

这是现在的样子:

这是我的 HTML:

<div class="container mt-5">
  <div class="row">
    <div class="col-sm-4">
      <div class="card">
        <div class="card-header">
          <h4 class="card-title">
            <img src="resources/icons/icon-monster/iconmonstr-gear-11-48.png" alt="" class="mr-2">
            Account Settings
          </h4>
        </div>
        <div class="card-body">
          <ul class="list-group list-group-flush">
            <li class="list-group-item active">About You</li>
            <li class="list-group-item">Education and background</li>
            <li class="list-group-item">Professional Development</li>
            <li class="list-group-item">Password</li>
            <li class="list-group-item">Email/Notifications</li>
            <li class="list-group-item">Reviews</li>
            <li class="list-group-item">Privacy Settings</li>
          </ul>
        </div>
      </div>
    </div><!--end of col-sm-4-->

这是我的 CSS:

/*----------------------------------------*/
/*--------SIDEBAR ACCOUNT SETTINGS---------*/
/*-----------------------------------------*/

.list-group-item.active {
  background-color: #328cc1;
  border-color: #328cc1;
  font-weight: bold;
  color: #fff;
}

.list-group-item {
  color: gray;
}

.list-group-item: hover {
  color: black;
}

除了列表项没有捕获悬停时的变化外，一切都很好。我试过通过 ul li .list-group-item: hover 定位它，但这也不起作用。

Answer 1

在 : 和 hover 之间有一个空格。这就是问题所在。

.list-group-item.active {
  background-color: #328cc1;
  border-color: #328cc1;
  font-weight: bold;
  color: #fff;
}

.list-group-item {
  color: gray;
}

.list-group-item:hover {
  color: black;
}

<div class="container mt-5">
  <div class="row">
    <div class="col-sm-4">
      <div class="card">
        <div class="card-header">
          <h4 class="card-title">
            <img src="resources/icons/icon-monster/iconmonstr-gear-11-48.png" alt="" class="mr-2"> Account Settings
          </h4>
        </div>
        <div class="card-body">
          <ul class="list-group list-group-flush">
            <li class="list-group-item active">About You</li>
            <li class="list-group-item">Education and background</li>
            <li class="list-group-item">Professional Development</li>
            <li class="list-group-item">Password</li>
            <li class="list-group-item">Email/Notifications</li>
            <li class="list-group-item">Reviews</li>
            <li class="list-group-item">Privacy Settings</li>
          </ul>
        </div>
      </div>
    </div>
    <!--end of col-sm-4-->