圆圈在活动时不会改变颜色答案

【问题标题】：Circle doesn't change color when active圆圈在活动时不会改变颜色
【发布时间】：2017-03-08 23:09:16
【问题描述】：

我想让菜单项在用户与其交互时改变颜色。

目前圆的颜色和文字会发生变化，但是当item处于活动状态时，文字颜色会发生变化，但圆不会发生变化。

在我的 HTML 中：

<div class="container-fluid hidden-xs">
  <div class="row">
    <div class="col-sm-2 col-sm-2">
    </div>
    <div class="col-sm-8">
      <div class="row">
        <div class="col-sm-6">
          <div class="row">
            <div class="col-sm-6">
              <div id="sous_menu_1" class="row">
              </div>
            </div>
            <div class="col-sm-6">
              <div class="row">
                <ul class="ul_1">
                  <li><a id="about">à propos</a>
                  </li>
                  <li><a>poles</a>
                  </li>
                  <li><a>clients</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-6">
          <div class="row">
            <div class="col-sm-6">
              <div class="row">
                <ul class="ul_2">
                  <li><a>projets</a>
                  </li>
                  <li><a>carriere</a>
                  </li>
                  <li><a>contact</a>
                  </li>
                </ul>
              </div>
            </div>
            <div class="col-sm-6">
              <div id="sous_menu_2" class="row">

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-2">
    </div>
  </div>
</div>

在我的 CSS 中：

.ul_1,
.ul_2 {
  list-style-type: none;
}
.ul_1 {
  padding-right: 40px;
  padding-left: 0px;
}
.ul_2 {
  padding-right: 0px;
  padding-left: 40px;
}
.ul_1 li,
.ul_2 li {
  position: relative;
}
.ul_1 a,
.ul_2 a {
  display: block;
  color: #000;
}
.ul_1 a {
  text-align: right;
}
.ul_2 a {
  text-align: left;
}
.ul_1 li::after {
  background-color: #bcbec0;
  border: 1px solid #bcbec0;
  border-radius: 50%;
  position: absolute;
  display: block;
  right: -15px;
  content: " ";
  height: 5px;
  width: 5px;
  top: 6px;
}
.ul_2 li::before {
  background-color: #bcbec0;
  border: 1px solid #bcbec0;
  border-radius: 50%;
  position: absolute;
  display: block;
  left: -15px;
  content: " ";
  height: 5px;
  width: 5px;
  top: 6px;
}
.active::after {
  background-color: #ED008C !important;
}
.ul_1 li:hover::after {
  background-color: #ED008C !important;
}
.ul_1 li a .active::after {
  background-color: #ED008C !important;
}

在活动页面上通过 JavaScript 添加一个类：

$(document).ready(function () {
  $('#about').addClass('active');
});

我以为这样可以解决问题，但没有：

.ul_1 li a .active::after{
    background-color: #ED008C !important;
}

【问题讨论】：

标签： html css twitter-bootstrap-3

【解决方案1】：

您实际上是在尝试定位错误的伪元素。

您将伪元素定义为：

.ul_1 li::after {
    background-color: #bcbec0;
    border: 1px solid #bcbec0;
    border-radius: 50%;
    position: absolute;
    display: block;
    right: -15px;
    content: " ";
    height: 5px;
    width: 5px;
    top: 6px;
}

代替

.ul_1 li a::after {
    background-color: #bcbec0;
    border: 1px solid #bcbec0;
    border-radius: 50%;
    position: absolute;
    display: block;
    right: -15px;
    content: " ";
    height: 5px;
    width: 5px;
    top: 6px;
}

因此，当 active 类应用于锚链接时，它将不起作用，因为您的选择器错误。

.ul_1 li a.active::after {
  background-color: #ED008C;
}

$(document).ready(function() {
  $('#about').addClass('active');
});

.ul_1,
.ul_2 {
  list-style-type: none;
  margin-top: 50px;
}
.ul_1 {
  padding-right: 40px;
  padding-left: 0px;
}
.ul_2 {
  padding-right: 0px;
  padding-left: 40px;
}
.ul_1 li,
.ul_2 li {
  position: relative;
}
.ul_1 a,
.ul_2 a {
  display: block;
  color: #000;
}
.ul_1 a {
  text-align: right;
}
.ul_2 a {
  text-align: left;
}
.ul_1 li a::after {
  background-color: #bcbec0;
  border: 1px solid #bcbec0;
  border-radius: 50%;
  position: absolute;
  display: block;
  right: -15px;
  content: " ";
  height: 5px;
  width: 5px;
  top: 6px;
}
.ul_2 li::before {
  background-color: #bcbec0;
  border: 1px solid #bcbec0;
  border-radius: 50%;
  position: absolute;
  display: block;
  left: -15px;
  content: " ";
  height: 5px;
  width: 5px;
  top: 6px;
}
.active::after {
  background-color: #ED008C;
}
.ul_1 li:hover::after {
  background-color: #ED008C;
}
.ul_1 li a.active::after {
  background-color: #ED008C;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid hidden-xs">
  <div class="row">
    <div class="col-sm-2 col-sm-2">
    </div>
    <div class="col-sm-8">
      <div class="row">
        <div class="col-sm-6">
          <div class="row">
            <div class="col-sm-6">
              <div id="sous_menu_1" class="row">
              </div>
            </div>
            <div class="col-sm-6">
              <div class="row">
                <ul class="ul_1">
                  <li><a id="about">à propos</a>
                  </li>
                  <li><a>poles</a>
                  </li>
                  <li><a>clients</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>

所以，更正原来的定义，它就可以工作了！

【讨论】：