悬停时显示从白色边框到黑色边框的过渡

Question

目标：
将鼠标悬停在图片上，将显示从白色边框到黑色边框的过渡。

问题：
我找不到正确的语法来解决它。

JSBIN:
https://jsbin.com/hiviguyaru/edit?html，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;
}
.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);
}
}

<div class="cards">
<div class="card">
<img src="https://i.picsum.photos/id/638/200/300.jpg?hmac=oYRYfxaIBKyb10YHb6-3AGadeAdyEWX91vrVrqdTnGE" class="responsive" alt="" />
<div class="cardTitle">ONE</div>
</div>
<div class="card">
<img src="https://i.picsum.photos/id/638/200/300.jpg?hmac=oYRYfxaIBKyb10YHb6-3AGadeAdyEWX91vrVrqdTnGE" class="responsive" alt="" />
<div class="cardTitle">TWO</div>
</div>
<div class="card">
<img src="https://i.picsum.photos/id/638/200/300.jpg?hmac=oYRYfxaIBKyb10YHb6-3AGadeAdyEWX91vrVrqdTnGE" class="responsive" alt="" />
<div class="cardTitle">THREE</div>
</div>
</div>

Answer 1

在.card {内部使用

transition: border 0.3s;

.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 0.3s; /* just this line... */
}
.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);
}
}

<div class="cards">
<div class="card">
<img src="https://i.picsum.photos/id/638/200/300.jpg?hmac=oYRYfxaIBKyb10YHb6-3AGadeAdyEWX91vrVrqdTnGE" class="responsive" alt="" />
<div class="cardTitle">ONE</div>
</div>
<div class="card">
<img src="https://i.picsum.photos/id/638/200/300.jpg?hmac=oYRYfxaIBKyb10YHb6-3AGadeAdyEWX91vrVrqdTnGE" class="responsive" alt="" />
<div class="cardTitle">TWO</div>
</div>
<div class="card">
<img src="https://i.picsum.photos/id/638/200/300.jpg?hmac=oYRYfxaIBKyb10YHb6-3AGadeAdyEWX91vrVrqdTnGE" class="responsive" alt="" />
<div class="cardTitle">THREE</div>
</div>
</div>

阅读有关MDN 转换的更多信息