Solved

Hover effect for size and color variant pills in Dawn 11

D666
Excursionist
23 2 8

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!

Accepted Solutions (2)

techlyser_web
Shopify Partner
1407 263 278

This is an 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.

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

View solution in original post

D666
Excursionist
23 2 8

This is an accepted solution.

Hi @techlyser_web,

 

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. 😸

 

 

View solution in original post

Replies 3 (3)

techlyser_web
Shopify Partner
1407 263 278

This is an 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.

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
D666
Excursionist
23 2 8

This is an accepted solution.

Hi @techlyser_web,

 

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. 😸

 

 

techlyser_web
Shopify Partner
1407 263 278

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

 

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com