Превращаем текст привязки в белый цвет, но перед тем, как навести курсор мыши на его контейнер

Question

что я пытаюсь сделать sh когда я наведу курсор на контейнер почтового ящика, он превратит тег привязки в белый цвет, прежде чем я фактически наведу курсор на саму ссылку. Я хочу сделать так, чтобы ссылка и поле, в котором она была вложена, были сгруппированы вместе.

Вместо этого я получаю следующее: когда я нахожу курсор мыши над полем, текст привязки остается черным, только после того, как я наведите курсор мыши над ним. сам текст, что он становится белым.

* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}

body,
html {
  width: 100%;
  font-size: 16px;
  color: #444352;
  font-family: 'Questrial', sans-serif;
  font-weight: 300;
  line-height: 1.5;
}


/* HEADER */

.header {
  height: 40em;
  margin: 10em 5em 0;
}

.header h1 {
  padding: 0 0 70px 0;
  font-size: 2.5rem;
  letter-spacing: 0.05rem;
  font-weight: 300;
}

.header p {
  font-size: 2.3rem;
  font-weight: 400;
  max-width: 710px;
  line-height: 3.5rem;
  letter-spacing: 0.01rem;
}

.header-email a {
  text-decoration: none;
  color: #444352;
  font-size: 0.6em;
  letter-spacing: 0.06em;
}

.header-email a:hover {
  color: #F8F8FF;
}

.header h3 {
  padding-top: 50px;
  letter-spacing: .1rem;
}

.underline--magical {
  background-image: linear-gradient(120deg, #007BFF 0%, #007BFF 100%);
  background-repeat: no-repeat;
  background-size: 100% .1em;
  background-position: 0 80%;
  transition: background-size .2s ease-in-out;
  display: inline-block;
  padding: 0 5px;
}

.underline--magical:hover {
  background-size: 100% 70%;
}

<section class="header">
  
    <p class="header-email underline--magical puff-in-ver">
      <a href="mailto:firstlast88@gmail.com" target="_blank" title="email">firstlast88@gmail.com</a>
    </p>
  
</section>

Я пытался применить белый текст к фону при наведении, но безуспешно.

Answer 1

Вы должны добавить этот .header: hover a .header: hover .underline - магический код к css

* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}

body,
html {
  width: 100%;
  font-size: 16px;
  color: #444352;
  font-family: 'Questrial', sans-serif;
  font-weight: 300;
  line-height: 1.5;
}


/* HEADER */
.header:hover a{
color: #F8F8FF;
}
.header:hover .underline--magical{
background-size: 100% 70%;}
.header {
  height: 40em;
  margin: 10em 5em 0;
}

.header h1 {
  padding: 0 0 70px 0;
  font-size: 2.5rem;
  letter-spacing: 0.05rem;
  font-weight: 300;
}

.header p {
  font-size: 2.3rem;
  font-weight: 400;
  max-width: 710px;
  line-height: 3.5rem;
  letter-spacing: 0.01rem;
}

.header-email a {
  text-decoration: none;
  color: #444352;
  font-size: 0.6em;
  letter-spacing: 0.06em;
}



.header h3 {
  padding-top: 50px;
  letter-spacing: .1rem;
}

.underline--magical {
  background-image: linear-gradient(120deg, #007BFF 0%, #007BFF 100%);
  background-repeat: no-repeat;
  background-size: 100% .1em;
  background-position: 0 80%;
  transition: background-size .2s ease-in-out;
  display: inline-block;
  padding: 0 5px;
}

<section class="header">
  
    <p class="header-email underline--magical puff-in-ver">
      <a href="mailto:firstlast88@gmail.com" target="_blank" title="email">firstlast88@gmail.com</a>
    </p>
  
</section>

Answer 2

Вам необходимо использовать этот селектор: .underline--magical:hover a

* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}

body,
html {
  width: 100%;
  font-size: 16px;
  color: #444352;
  font-family: 'Questrial', sans-serif;
  font-weight: 300;
  line-height: 1.5;
}


/* HEADER */

.header {
  height: 40em;
  margin: 10em 5em 0;
}

.header h1 {
  padding: 0 0 70px 0;
  font-size: 2.5rem;
  letter-spacing: 0.05rem;
  font-weight: 300;
}

.header p {
  font-size: 2.3rem;
  font-weight: 400;
  max-width: 710px;
  line-height: 3.5rem;
  letter-spacing: 0.01rem;
}

.header-email a {
  text-decoration: none;
  color: #444352;
  font-size: 0.6em;
  letter-spacing: 0.06em;
}

.header-email a:hover {
  transition: color .5s;
}

.header h3 {
  padding-top: 50px;
  letter-spacing: .1rem;
}

.underline--magical {
  background-image: linear-gradient(120deg, #007BFF 0%, #007BFF 100%);
  background-repeat: no-repeat;
  background-size: 100% .1em;
  background-position: 0 80%;
  transition: background-size .2s ease-in-out;
  display: inline-block;
  padding: 0 5px;
}

.underline--magical:hover {
  background-size: 100% 70%;
}
.underline--magical:hover a {
  color: #F8F8FF;
}

<section class="header">

  <p class="header-email underline--magical puff-in-ver">
    <a href="mailto:firstlast88@gmail.com" target="_blank" title="email">firstlast88@gmail.com</a>
  </p>

</section>