Как управлять стилями в css и отслеживать disabled?

Question

[tron21]

Всем доброго дня! Есть следующий вопрос - у меня есть определенный элемент , при наведении на который меняются классы. Но при этом , если определенный элемент disabled мне нужно чтобы этот hover не выполнялся. Как такое можно реализовать? Как-то через :not или что-то иное?

/*Если .Input:disabled ( input disabled=true ) , то нижний hover выполнятся не должен*/

.container:hover  {
  cursor: pointer;
  background-color:var(--gray-high);
  color: var(--white);
  transition: background-color 0.8s, color 0.8s;
}

Answer 1

[Сергей delphinpro]

<input>
<div class="container">
</div>

input:not(:disabled) + .container:hover {

}

Comments

[tron21]

Странно, но у меня не отрабатывает. Это может быть связано с тем что input у меня ребенок div ? Если не disabled , то hover не отрабатывает

<div className={style.roleContainer}>
                  <label className={style.itemLabel} htmlFor={TEXT}>
                    {TEXT}
                  </label>
                  <input
                    checked
                    type="checkbox"
                    className={style.itemInput}
                    name={TEXT}
                    id={TEXT}
                  />
                </div>

[Сергей delphinpro]

tron21, так не выйдет

[tron21]

Сергей delphinpro, эх, жаль. Все равно спасибо!

[Сергей delphinpro]

tron21, Измените верстку

<my-cont>
  <input display:none id=123>
  <my-cont-body>
      <label for=123></label
      span.checkbox-indicator
  </my-cont-body>
</my-cont>

input:not(:disabled) + .my-cont-body:hover {} 
input:checked + .my-cont-body .checkbox-indicator { / показать галочку/ }

[tron21]

Сергей delphinpro, спасибо, попробую