(CSS) How to use :not and :hover at the same time?

August 1, 2023

I want to stop showing hover while checkbox is checked, how can I do?

// Typescript
<label className={styles.checkbox_container}>
  <input type="checkbox" />This is a Label
  <span className={styles.checkmark}></span> // customized tick symbol with red color for checked status
  <span className={styles.checkmarkHover}></span> // customized tick symbol with blue color for :hover;
</label>  

// CSS 
.checkbox_container:not(.checkbox_container input:checked):hover input ~ .checkmarkHover {
    // does not work
}

When the checkbox is not being checked, hover works.
When the checkbox is being checked, hover expected to do nothing.

>Solution :

You’re applying :not to the wrong element. .checkbox_container will never match .checkbox_container input:checked anyway. You want input:not(:checked).

.checkbox_container:hover input:not(:checked) ~ .checkmarkHover
{
    color: #f00;
}

<label class="checkbox_container">
  <input type="checkbox" />This is a Label
  <span class="checkmark">XXX</span>
  <span class="checkmarkHover">YYY</span>
</label>