Why isn't my product name underlining on image hover?

[itsolidude12]

Hey there

I’m trying to get the product name to get text-decoration:underline; however, I’m trying to trigger it as soon as you hover over the products image.

I thought i had it but it wont apply

Site: click me

Password: siesoh

.grid-product__content:hover ~ .grid-product__title.grid-product__title--body {
    text-decoration: underline;
}

[WoodyDev]

Hi!

Could you post a screenshot of which page you are trying to make this change occur? Or the link to the page

[WoodyDev]

Or add this to our theme.css file and see if this is what you’re after

.grid-product__content:hover {
    text-decoration: underline !important;
}

[oscprofessional]

@itsolidude12
Hello,

.grid-product__title.grid-product__title--body:hover {
  text-decoration: underline;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->theme.scss.liquid

Like This

[itsolidude12]

Works great! However, could you help me to trigger if I hover the product image too?

Would you also be kind enough to tell me why my code didnt work? (id like to learn :P)

[WoodyDev]

@itsolidude12

The code i posted above triggers when the image is hovered

[itsolidude12]

Weird. I can see that your targeting the product grid but for some reason it only works when i hover the actual product name. I did just target the product title earlier to see if that would work. Im starting to think that shopify is taking forever to update the changes in code maybe.

[WoodyDev]

Yes sometimes it takes a while for the changes to take effect, but it definitely works when I test it in inspect element:

[itsolidude12]

I’ve double checked and your definitely targeting the title and not the whole product tile ._.

I found a fix tho, thank you!