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定位它：悬停，这也不起作用。

Answer 1

在：和悬停之间有一个空格。这就是它的问题。

＆＃13;

.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;
}

＆＃13;

<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-->

＆＃13;

列出悬停时不变的项目

1 个答案: