Add hover to only one link on the productpage

Store Design
, , ,

Topic summary

  • Goal: apply a hover effect to only one specific text/link on the product page.

  • Solutions provided: add a CSS rule using the :hover pseudo-class with precise selectors so only the intended element changes color. One method targets “.product__info-container .product__text:nth-child(2):hover” in base.css; another adds a style before in theme.liquid targeting the specific “.product__text” with the “caption-with-letter-spacing” class.

  • Outcome: the hover color change works as intended. The requester shared the store URL and a screenshot; the CSS snippets are central to understanding the fix.

  • Follow-up: the requester asked about adding a “hover slider” effect. A reply confirmed it’s feasible and offered further help, but no implementation details were provided.

  • Status: initial hover requirement resolved; enhancement (hover slider) remains open without concrete steps yet.

Summarized with AI on January 3. AI used: gpt-5.
1

I want to have a hover effect on only this text, tried several codes but their messed up the whole ting. Hope we can figure something out who is working. :slightly_smiling_face:

Thanks for your contributions, i will sure accept soloutions and like for you. :slightly_smiling_face:

My url:

www.dekanten.no

See attached image:

Screenshot 2024-03-08 at 12-13-42 Gris Charnel(1).png
Screenshot 2024-03-08 at 12-13-42 Gris Charnel(1).png674Ă—214 34.4 KB

2

@Dekanten

please add below code to your theme files

Online Store > Theme files > Edit Code > Base.css file at the end place the code. Note: change the color code to desired color.

.product__info-container .product__text:nth-child(2):hover {
	color: red !important;
}

thanks

1 Like
3

Hello @Dekanten

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

.product a.product__text.caption-with-letter-spacing:hover { color: #afd3f3 !important; /*change color according to you*/ }

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

1 Like
4

Hello and many thanks for your code, this works flawless. :slightly_smiling_face:

Maybe i want to have a hover slider later, can this me done too? :slightly_smiling_face:

5

yeah it will… if not do let me know