求助：实现鼠标悬停时边框从白色到黑色的过渡效果

你当前的代码已经实现了悬停时边框颜色切换，但因为缺少过渡动画属性，颜色变化是瞬间完成的。要实现平滑过渡，只需要给.card添加transition属性来指定边框颜色的过渡效果。

修改后的核心CSS代码 #

.card {
  width: 100%;
  min-height: 100px;
  background-color: #e6e6e6;
  text-align: center;
  border: 1px solid white;
  /* 添加过渡效果，指定border-color属性的过渡时长与动画曲线 */
  transition: border-color 0.3s ease;
}

完整CSS代码 #

.cards {
  margin: 0 auto;
  display: grid;
  grid-gap: 5px;
}

.card {
  width: 100%;
  min-height: 100px;
  background-color: #e6e6e6;
  text-align: center;
  border: 1px solid white;
  transition: border-color 0.3s ease;
}

.card:hover {
  border: 1px solid black;
}

.cardTitle {
  width: 100%;
  margin-top: -4px;
  color: white;
  background-color: grey;
  font-size: xx-large;
}

.responsive {
  width: 300px;
}


/* 2 column */

@media (min-width: 700px) and (max-width: 899px) {
  div.cards {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* 3 columns */

@media (min-width: 900px) {
  div.cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

效果说明 #

• transition: border-color 0.3s ease; 表示仅对border-color属性应用过渡动画，时长0.3秒，采用ease曲线（开始缓慢、中间加速、结尾减速）。你可以根据需求调整时长（比如改为0.5s）或动画曲线（比如linear线性过渡）。
• 由于.card和.card:hover中边框宽度一致（均为1px），过渡只会作用于颜色变化，不会出现边框跳动的问题。

内容的提问来源于stack exchange，提问作者HelloWorld1