CSS3属性转换在悬停时不起作用

Question

我想在div上做一个悬停，这会使边框变粗。我使用box-shadow: inset...属性，因为它不会扩展我的元素。但是，transition不起作用，这可能是因为在主要类中，box-shadow没有inset属性。我不知道如何解决它......

.card {
  width: 100px;
  height: 100px;
  box-shadow: 0 0 2.5rem 0 rgba(207, 212, 225, 0.4);
}

.card--group {
  transition: all 0.3s ease-in-out;
}

.card--group:hover {
  box-shadow: inset 0 0 0 0.1875rem #54d1bd;
}

<div class="card card--group">

</div>

Answer 1

.card {
  width: 100px;
  height: 100px;
  background: red;
  /* box-shadow: 0 0 2.5rem 0 rgba(207, 212, 225, 0.4); */
}

我不知道你要用.card上的当前box-shadow做什么，因为我没有看到它。但如果你删除它，你的过渡将起作用。

Answer 2

由于你有2个不同的阴影，你可以考虑多个box-shadow，你将能够在每个阴影之间进行过渡。你显示插入的一个，你隐藏了初始的一个。

.card {
  width: 100px;
  height: 100px;
  box-shadow: 
    inset 0 0 0 0 #54d1bd,
    0 0 2.5rem 0 rgba(207, 212, 225, 0.8);
}

.card--group {
  transition: all 0.3s ease-in-out;
}

.card--group:hover {
  box-shadow: 
    inset 0 0 0 0.1875rem #54d1bd,
    0 0 0 0 rgba(207, 212, 225, 0.8);
}

<div class="card card--group">

</div>

Answer 3

尝试在悬停中添加属性.card - group：hover

.card {
  width: 100px;
  height: 100px;
  background: red;
  box-shadow: 0 0 2.5rem 0 rgba(207, 212, 225, 0.4);
}

.card--group {
  transition: all 0.3s ease-in-out;
}

.card--group:hover {
  width: 200px;
  box-shadow: inset 0 0 0 0.1875rem #54d1bd;
}

<div class="card card--group">

</div>