Youness Ben Youness Ben - 1 month ago 8
CSS Question

Circle doesn't change color when active

I'm having a problem when I put my

a
in active my
ul
my circle doesn't change the color here an exemple of code:

in the view:

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


In my 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;
}


I used a script so that it generate active like this in the active page

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


My problem is: when I hover my menu the color of the circle and text change but when it is active the text color change become active but not the circle.

I thought this would do the trick but no:

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

Answer

You're actually trying to target the wrong pseudo-element.

You're defining the pseudo-element as:

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

Instead of

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

So when the active class is applied to the anchor link it won't work because your selector is wrong.

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

So, correct the original definition and it works!