:hover覆盖了:active的样式 - CSS

Question

这是一个简单的购买按钮：

.btn {
  font-family: "IRANSansWeb";
  max-width: 200px;
  width: 100%;
  height: 40px;
  font-weight: 600;
  margin: 5px 0;
  margin-top: 15px;
  cursor: pointer;
  opacity: 1;
  background: linear-gradient(to right, #9672fb, #d772fb);
  border-radius: 30px;
  border: none;
  color: white;

  box-shadow: 0px 5px 10px -3px rgb(0 0 0 / 37%);
  transition: 0.2s;

}

.btn:active {
  transform: translateY(5px);
  box-shadow: none;
}

.btn:hover {
  transform: translateY(1px);
  box-shadow: 0px 2px 5px -1px rgb(0 0 0 / 30%);
}

<div class="submit-container">
  <div class="spinner center">
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
  </div>
  <input class="btn submit" id="submit-pay" type="submit" value="BUY" />
</div>

请注意，当我们点击按钮时，没有任何移动（变换和阴影变化），对吧？

如果我移除悬停样式，我就可以得到那些期望的移动效果：

.btn {
  font-family: "IRANSansWeb";
  max-width: 200px;
  width: 100%;
  height: 40px;
  font-weight: 600;
  margin: 5px 0;
  margin-top: 15px;
  cursor: pointer;
  opacity: 1;
  background: linear-gradient(to right, #9672fb, #d772fb);
  border-radius: 30px;
  border: none;
  color: white;

  box-shadow: 0px 5px 10px -3px rgb(0 0 0 / 37%);
  transition: 0.2s;

}

.btn:active {
  transform: translateY(5px);
  box-shadow: none;
}

.btn:not(.disabled):hover {
  
}

<div class="submit-container">
  <div class="spinner center">
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
  </div>
  <input class="btn submit" id="submit-pay" type="submit" value="BUY" />
</div>

我怎样才能在按钮上同时实现活动状态和悬停状态的动画效果？

- Sara Ree

Answer 1

你可以使用!important来覆盖其他样式：

.btn {
  font-family: "IRANSansWeb";
  max-width: 200px;
  width: 100%;
  height: 40px;
  font-weight: 600;
  margin: 5px 0;
  margin-top: 15px;
  cursor: pointer;
  opacity: 1;
  background: linear-gradient(to right, #9672fb, #d772fb);
  border-radius: 30px;
  border: none;
  color: white;

  box-shadow: 0px 5px 10px -3px rgb(0 0 0 / 37%);
  transition: 0.2s;

}

.btn:active {
  transform: translateY(5px) !important;
  box-shadow: none !important;
}

.btn:hover {
  transform: translateY(1px);
  box-shadow: 0px 2px 5px -1px rgb(0 0 0 / 30%);
}

<div class="submit-container">
  <div class="spinner center">
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
  </div>
  <input class="btn submit" id="submit-pay" type="submit" value="BUY" />
</div>

如果您不想使用！important，可以尝试：

.btn {
  font-family: "IRANSansWeb";
  max-width: 200px;
  width: 100%;
  height: 40px;
  font-weight: 600;
  margin: 5px 0;
  margin-top: 15px;
  cursor: pointer;
  opacity: 1;
  background: linear-gradient(to right, #9672fb, #d772fb);
  border-radius: 30px;
  border: none;
  color: white;

  box-shadow: 0px 5px 10px -3px rgb(0 0 0 / 37%);
  transition: 0.2s;

}


.btn:hover {
  transform: translateY(1px);
  box-shadow: 0px 2px 5px -1px rgb(0 0 0 / 30%);
}

.btn:active {
  transform: translateY(5px);
  box-shadow: none;
}

<div class="submit-container">
  <div class="spinner center">
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
  </div>
  <input class="btn submit" id="submit-pay" type="submit" value="BUY" />
</div>

- Spectric

---

请看一下我其他的问题：https://stackoverflow.com/questions/68733000/exclude-hover-on-element-when-its-parent-node-has-disabled-class - Sara Ree

@SaraRee 当然，没问题。 - Spectric

Answer 2

:hover表示当鼠标指向元素时应用。

:active表示当鼠标按钮被点击时应用（因此需要先使用:hover）。

您无法使其仅处于:active状态而不是:hover状态。（这在某种程度上变得简单，因为您可以使用键盘激活）。

---

请查看级联规范。

按选择器的特殊性对具有相同重要性和来源的排序规则进行排序

您的规则具有相等的特殊性和重要性。

最后，按指定的顺序排序

您在:active之后指定了:hover，因此:hover规则覆盖:active规则。

请将它们反过来定义，以便:active规则覆盖:hover规则。

- Quentin