Как я могу сделать переход текста от светлого к темному ... см. Ниже

Question

Почему цвет текста в сегментах 2 и 3 меняется с темного на светлый, но в кругах 1 и 4 он не переходит через CSS? Как я могу сделать эту работу на 1 и 4?

См. Проблему на CodePen: https://codepen.io/moonfireweb/pen/oNXYqoj?editors=1100

/* ***********hover and transition effects */
.ctwo .circle1:hover,
.ctwo .circle4:hover,
.ctwo .circle1 p:hover {
  background-color: #dbf75d;
  color: black;
  cursor: pointer;
}
.ctwo .circle2:hover,
.ctwo .circle3:hover {
  background-color: #00388d;
  color: aliceblue;
  cursor: pointer;
}

Answer 1

Вы хотите изменить цвет текста при наведении курсора на кружок, поэтому вам лучше использовать CSS like;

.ctwo .circle1:hover p,
.ctwo .circle4:hover p { 
   color: black;
}

Если вы используете оба текста одновременно, ваш текст также будет зависит от цвета фона. Это ситуация, которую вы не хотели бы.

.ctwo .circle1:hover, 
.ctwo .circle1:hover p { 
   background-color: #dbf75d; 
}

Answer 2

Поскольку вы устанавливаете цвет .circle1 p и .circle4 p на black, изменение цвета только с помощью .circle1 не будет иметь никакого эффекта, поскольку оно менее точное. Таким образом, вы должны быть как можно точнее, чтобы изменить цвет:

.circle1:hover p,
.circle4:hover p {
    color: black;
}

Проверьте фрагмент:

p {
  margin: 0;
  text-align: center;
  font-size: 40px;
}

.circle1 p,
.circle4 p {
  color: aliceblue;
}

.circle1 p {
  bottom: 5px;
  right: 10px;
}

.circle2 p {
  bottom: 5px;
  left: 10px;
}

.circle3 p {
  top: 5px;
  right: 10px;
}

.circle4 p {
  top: 5px;
  left: 10px;
}

p {
  position: absolute;
}

.circle1,
.circle2,
.circle3,
.circle4 {
  width: 100px;
  height: 100px;
  float: left;
  position: relative;
  transition: background-color 1s linear, color 1s linear;
}

.circle1 {
  background-color: #000000;
  border-top-left-radius: 100px;
}

.circle2 {
  background-color: #e22b90;
  border-top-right-radius: 100px;
}

.circle3 {
  background-color: #e22b90;
  border-bottom-left-radius: 100px;
}

.circle4 {
  background-color: #000000;
  border-bottom-right-radius: 100px;
}

.linereturn {
  clear: both;
}


/* ***********hover and transition effects */

.ctwo .circle1:hover,
.ctwo .circle4:hover {
  background-color: #dbf75d;
  cursor: pointer;
}

.ctwo .circle1:hover p,
.ctwo .circle4:hover p {
  color: black;
}

.ctwo .circle2:hover,
.ctwo .circle3:hover {
  background-color: #00388d;
  color: aliceblue;
  cursor: pointer;
}

<section class="ctwo">
  <h1>
    5. Hover and transition effects in CSS.
  </h1>
  <div class="circle1">
    <p>1</p>
  </div>
  <div class="circle2">
    <p>2</p>
  </div>
  <div class="linereturn"></div>
  <div class="circle3">
    <p>3</p>
  </div>
  <div class="circle4">
    <p>4</p>
  </div>
</section>