Как создать карту цвета фона при наведении

Question

Я пытаюсь настроить макет карты, где карты меняют цвет фона, когда пользователь наводит курсор на карту.Как и карты на этой странице: https://texasdeafed.org/students/programs

Я попытался добавить информацию о наведении в заголовок, где у меня есть тень:

.card:hover {
    background-color: #fffff
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

Пример:

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  width: 50%;
  background-color: #DCE1E0;
}

.card:hover {
  background-color: #fffff;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.container {
  padding: 2px 5px;
}

<div class="card">
  <br />
  <center>
    <h1>Family Weekend
      <br />
      <br />Retreat</h1>
  </center>
  <br />

  <img src="/cms/lib6/TX01923182/Centricity/Domain/180/Shelly_Parent_Liaison_ca    rdflipped.jpg" alt="Woman reading Parent Liaison card by     texasdeafed.org" style="width:100%">

  <div class="container">
    <br />
    <p>
      A special weekend in Austin for families with deaf and hard of hearing children hosted by the Educational Resource Center on Deafness at Texas School for the Deaf </p>
    <br />
    <br />
    <br />
  </div>
</div>

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

Answer 1

Все, что вы делаете, работает довольно хорошо, Единственная ошибка, которую имеет ваш css - это шестнадцатеричный код. Там, где вы пытаетесь дать белый цвет, используя #fffff - 5 раз букву f, это должно быть 6 раз, Проверьте мой ответ! Удачи.

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  width: 50%;
  background-color: #DCE1E0;
}

.card:hover {
  background-color: #ffffff;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.container {
  padding: 2px 5px;
}

<div class="card">
  <br />
  <center>
    <h1>Family Weekend
      <br />
      <br />Retreat</h1>
  </center>
  <br />

  <img src="/cms/lib6/TX01923182/Centricity/Domain/180/Shelly_Parent_Liaison_ca    rdflipped.jpg" alt="Woman reading Parent Liaison card by     texasdeafed.org" style="width:100%">

  <div class="container">
    <br />
    <p>
      A special weekend in Austin for families with deaf and hard of hearing children hosted by the Educational Resource Center on Deafness at Texas School for the Deaf </p>
    <br />
    <br />
    <br />
  </div>
</div>

Answer 2

Установить цвет фона на #ffffff.