Question

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

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

在我的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;
}

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

所以，纠正原始定义并且它有效！

活动时圆圈不会改变颜色

1 个答案: