Блог

Главная - Вопросы по программированию - исключить наведение указателя мыши на элемент, когда его родительский узел отключил класс

исключить наведение указателя мыши на элемент, когда его родительский узел отключил класс

#javascript #html #css

Вопрос:

У меня есть ввод в виде кнопки, и я хочу, чтобы пользователи не видели эффект наведения при добавлении отключенного класса в родительский узел:

 .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: defau<
} 
 <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

Ответ №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: defau<
} 
 <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>

Комментарии:

1. @SaraRee Без проблем 🙂

Метки: ,