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

由于您有 2 个不同的阴影，您可以考虑多个box-shadow并且您将能够在每个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 2

尝试在悬停时为 .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>