javascript - 在 box-shadow 属性上禁用 CSS 过渡

Question

是否可以禁用按钮上 box-shadow 属性的转换并同时为不同的属性值启用它？

我有 CSS:

#btn-more {
  padding: 6px 28px;
  font-size: 24px;
  line-height: 36px;
  letter-spacing: 1px;
  color: #c6ca53;
  background: #9e2a2b;
  border: 1px solid #c6ca53;
  box-shadow: 0 0 0 2px #9e2a2b;
  transition-duration: .3s;
}

#btn-more:hover {
  box-shadow: 22px 22px 0px 0px rgba(172, 76, 51, 0.5), 0 0 0 2px #9e2a2b;
}

<button id="btn-more">More</button>

很明显，我希望具有 #9e2a2b 颜色属性的 box-shadow 始终可见，并禁用其 transition。但是 :hover box-shadow 应该仍然在 :hover 上进行转换。

试图实现this solution但没有运气。有什么办法解决这个问题吗？

Answer 1

在 :hover 状态下切换阴影的顺序，初始阴影将保持不变:

#btn-more {
  padding: 6px 28px;
  font-size: 24px;
  line-height: 36px;
  letter-spacing: 1px;
  color: #c6ca53;
  background: #9e2a2b;
  border: 1px solid #c6ca53;
  box-shadow: 0 0 0 2px #9e2a2b;
  transition-duration: .3s;
}

#btn-more:hover {
  box-shadow: 0 0 0 2px #9e2a2b, 22px 22px 0px 0px rgba(172, 76, 51, 0.5);
}

<button id="btn-more">More</button>