如何创建卡片悬停背景颜色

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。