javascript - 当其父节点具有禁用类时排除元素上的悬停

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) !important;
  box-shadow: none !important;
}

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



.submit-container.disabled .submit {
  opacity: 0.5;
  cursor: default;
}

<div class="submit-container disabled">
  <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:not(.disabled):hover

Answer 1

将 :not 条件移至父级:

.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;

}

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

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



.submit-container.disabled .submit {
  opacity: 0.5;
  cursor: default;
}

<div class="submit-container disabled">
  <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>
<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>