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赋予白色的情况下-字母f的5倍，它必须是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。

如何创建卡片悬停背景色

2 个答案: