Почему не меняется цвет в контейнере?

Question

[Arbil]

Имеется такой код

<div class="fields">

        <div class="field__one">
          <div class="circle"><p>1</p></div>
          <div class="field__title">domain</div>
          <div class="field__description">Find the Perfect web Hosting Package for You, best  hosting services. Join now and get free domain !</div>
        </div>

        <div class="field__two">
          <div class="circle"><p>2</p></div>
          <div class="field__title">hosting</div>
          <div class="field__description">Website hosting services are basically the plot of internet land that your website storefront sits on.</div>
        </div>

        <div class="field__three">
          <div class="circle"><p>3</p></div>
          <div class="field__title">website</div>
          <div class="field__description">Customers can access and see it when they type your url.  different types of hosting services that cater to the varying types of businesses. </div>
        </div>
          </div>

.circle{
  position: relative;
  background-color: #fff;
  border-radius: 50%;
}

.circle p{
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  color:#00aeef;
}

.circle:hover{
  background: linear-gradient(to left, #9d35c0, #31aae2);
  color: #fff;
}

Как я понимаю, если указать в hover color, то цвет текста в контейнере должен поменяться, но этого не происходит. Почему? Может я что-то не так понимаю? Как изменить цвет текста при наведении на контейнер, а не на текст ?

Comments

[Ankhena]

Потому что при наведении вы меняете цвет у .circle
Но внутри у него есть p, которому задан другой цвет.
И этот цвет выигрывает.

Т.е. вам нужно менять цвет у p при наведении на .circle

.circle:hover p {...}

Зачем там, кстати, p?
Вообще всю конструкцию <div class="circle"><p>1</p></div> можно заменить на псевдоэлемент для .field__one и использовать counter-reset и counter-increment.

Answer 1

[kryamk]

.circle:hover p{
color: #fff;
}