[Support request] Style for site links

[Pedro]

Hello! I’m trying to make the text of the links on my site underline when I mouse over it.

Something like Amazon does: https://mega.nz/#!upFR1YqR!tDbVgkW6lVq6RkLzCE5bmLmqC5cf1yvsEVwDv-zQSTY

[Leo]

Hi there,

Try this CSS:

.entry-content a:hover,
.woocommerce ul.products li.product .woocommerce-LoopProduct-link:hover,
.sidebar .widget li a:hover {
    text-decoration: underline;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know if this helps 🙂

[Pedro]

Hi Leo! Thanks for the help.

CSS works for some links but not for others.

Like product names or widgets.

[Pedro]

Update: Some site buttons are also underlined when you mouse over them.

I don’t want this to happen.

You can help?

[Leo]

Updated the CSS above to include sidebar widgets and product titles.

Can you guide me to a button that you’d like to exclude?

[Pedro]

Update: The new code worked.

However I can note for example for products only underline the text when hovering over the product title.

If the mouse is placed on the product image the text is not underlined.

Regarding the button, here you can see one: https://www.rebajaslocas.com/envios-y-entregas/

(They are buttons placed with Gutenberg)

[Leo]

Updated the CSS above again.

Then add this for the buttons:

a.wp-block-button__link:hover {
    text-decoration: none;
}

[Pedro]

Hi leo! Everything worked perfectly.

Thank you very much for all the help.

[Leo]

No problem 🙂

[Pedro]

Hi leo! Me again 🙂

I would like you to please help me, I just realized that the underlining is also being applied to the normal prices of the products.

Those that appear crossed out and in gray.

Here’s a screenshot: https://mega.nz/#!uwlXmQqA!umSeg0FGLYbE5hrXAxpz6NWjWvYrlCizjmpZxMgLvtU

Is there a way to do something to stop this from happening?

[Leo]

Hmm I gave it a shot but unfortunately, I don’t’ think that’s possible if you want the image to trigger all the underlines as it’s included in the same <div>

[Author]

Posts