Hover effect for size and color variant pills in Dawn 11

[D666]

Hi,

I have managed to style my pills for the selected size and colour pills with CSS using the code below.

Any idea how I can do the same for the hover state?

.js.product-form__input input[type="radio"]:checked + label {
  background-color: #e9e9e9;
  color: #515357;
  outline: 1px solid #999;
}

 Many thanks!

[niraj_patel · Accepted solution]

Hello @D666 
replace your code with this code
.js.product-form__input input[type="radio"] + label:hover {
    background-color: #e9e9e9;
    color: #515357;
    outline: 1px solid #999;
}
let me know if it is worked.

[niraj_patel · Accepted solution]

Hello @D666 
replace your code with this code
.js.product-form__input input[type="radio"] + label:hover {
    background-color: #e9e9e9;
    color: #515357;
    outline: 1px solid #999;
}
let me know if it is worked.

[D666 · Accepted solution]

Hi @niraj_patel,

Thank you for replying so quickly!

Your answer is correct but it was not working for me when I posted because...I had placed the style for the :checked state above the style for :hover. 😸

[niraj_patel]

Your welcome😄
Was my reply helpful? Click Like to let me know!
Thanks