Hover effect for size and color variant pills in Dawn 11

Store Design
, ,
1

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!

2

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.

3

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. :grinning_cat_with_smiling_eyes:**

4

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