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上的当前框阴影做什么，因为我看不到它。但是，如果删除此选项，则过渡将起作用。

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>

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

3 个答案: