Change colour of product title on mouseover

https://freediving.ie/shop

I want to change the colour of the font of product name on mouseover, the same as I have done for the product price. Any help appreciated.

Ideally I could get the front colours of both the price and product name title to change at the same time. But maybe not possible. Thanks.

Also, on my product detail page, the price is orange and has some kind of mouseover action happening. Can I remove this? https://freediving.ie/shop/p/aida-2-freediver-waterworld-dive-centre-co-kerry-28/06/25

14 hours ago, Daithi said:

https://freediving.ie/shop

 

I want to change the colour of the font of product name on mouseover, the same as I have done for the product price. Any help appreciated.

Ideally I could get the front colours of both the price and product name title to change at the same time. But maybe not possible. Thanks.

You can use this CSS code

.products.collection-content-wrapper div.grid-main-meta:hover .grid-title, h1.ProductList-title:hover {
    color: #7fe8ff !important;
}

Thank you kindly. Both worked perfectly.

I've noticed that when I mouseover the price, the title changes colour as well. But when I mouseover the title, the price does not change color. Any idea why this is happening and how to remedy?

Actually, the underline effect is triggered before the mouse reaches the text... 🤔

18 hours ago, Daithi said:

Thank you kindly. Both worked perfectly.

I've noticed that when I mouseover the price, the title changes colour as well. But when I mouseover the title, the price does not change color. Any idea why this is happening and how to remedy?

Actually, the underline effect is triggered before the mouse reaches the text... 🤔

You can use this code

section.grid-meta-wrapper:hover * {
    color: #7fe8ff !important;
}

Thank you once again.

I've now noticed that mouseover the product image causes the text to underline but not turn blue.

It's as if there's something surrounding the section of the screen which is allowing the link/text to ignore the main site hover instructions:

#page a:hover {
  color: #7FE8FF !important;
  text-decoration: underline !important;
}

Is there any code I can use that will make the text underline and turn blue when the mouse approaches the <div> (potentially?) that wraps the image and text underneath it?

Thanks.

13 hours ago, Daithi said:

Thank you once again.

I've now noticed that mouseover the product image causes the text to underline but not turn blue.

It's as if there's something surrounding the section of the screen which is allowing the link/text to ignore the main site hover instructions:

#page a:hover {
  color: #7FE8FF !important;
  text-decoration: underline !important;
}

Is there any code I can use that will make the text underline and turn blue when the mouse approaches the <div> (potentially?) that wraps the image and text underneath it?

Thanks.

So you mean when users hover or text, or hover image >> will underline + turn blue text?

If you watch where the mouse is when the underlining of the text happens, the underlining happens when the mouse rolls over the image and the rectangular area below the image. The font color change doesn't happen until the mouse is actually touching the text. Wondering if it's possible to trigger the text colour change when the underlining happens. Thanks.

So you want when users hover on image or text >> will make underline + color change on same time?