How to underline the text (link) on mouseover as in example.

This topic has 42 replies, 4 voices, and was last updated 3 years, 7 months ago by David.

Viewing 15 posts - 1 through 15 (of 43 total)

1 2 3 →

Author

Posts
February 1, 2022 at 2:00 am #2101043

francesco

I tried to search the forum but without success. is it possible to create this effect?

February 1, 2022 at 2:53 am #2101093
Fernando
Customer Support
Hi Francesco,

One approach you can do to add this effect is to first add a CSS class(“add-on-hover-underline”) in the Advanced section of the Block’s settings.

See this for reference: https://share.getcloudapp.com/6quEGppo

Then add this custom CSS to your website.
```
.add-on-hover-underline a:hover {
    text-decoration: underline !important;
}
```
Please refer to this link for assistance regarding adding CSS: https://docs.generatepress.com/article/adding-css/

Kindly let me know if this works. 🙂
February 1, 2022 at 5:23 am #2101244

francesco

Thanks for the reply. i did as you told me but it doesn’t seem to work.

fehu.it

February 1, 2022 at 5:38 am #2101255

David
Staff
Customer Support

Hi there,

can you provide a link to where we can see this? And a password to get past any coming soon pages.
You can share the info in the Private Information field.

February 1, 2022 at 5:46 am #2101270

francesco

ok done. you can see?

https://fehu.it/

February 1, 2022 at 5:51 am #2101275
David
Staff
Customer Support
Use this CSS instead:
```
.paging-navigation p a:hover {
    text-decoration: underline;
}
```
February 1, 2022 at 6:00 am #2101288

francesco

thanks, but if i want to hook this effect elsewhere too? esempio nella homepage sul excerpt?

February 1, 2022 at 6:20 am #2101309
David
Staff
Customer Support
Your home page posts have a dynamic container link, there is no <a> element being used in the Excerpt.

So do you want the excerpt text underlined ?
If so you can add this:
```
.dynamic-entry-excerpt p {
    text-decoration: underline;
}
```
February 1, 2022 at 6:32 am #2101320

francesco

Many thanks. I understand that I need to add CSS for each link I want to underline right? and if I also wanted it in the news or in the title of the contents on the home page? where can i find a list of codes? I understand that it is enough to change the subject to which to set this effect. right?

February 1, 2022 at 6:39 am #2101326

francesco

basically I would need this effect here too.

(home page)

February 1, 2022 at 7:03 am #2101349
David
Staff
Customer Support
For all those links.
REMOVE this:
```
.paging-navigation p a:hover {
    text-decoration: underline;
}
```
ADD this:
```
.paging-navigation p a:hover,
.rpwwt-sticky a:hover,
.generate-columns-container:hover h2 {
    text-decoration: underline;
}
```
February 1, 2022 at 7:39 am #2101392

francesco

I did as you told me. but now when I go to an article I select them all. (I state that I only added the code you sent me without doing anything else).

see image.

in addition to this, the effect does not appear on the navigation of news and posts.

February 1, 2022 at 9:06 am #2101583

David
Staff
Customer Support

I made a correction to my CSS here:

https://generatepress.com/forums/topic/how-to-underline-the-text-link-on-mouseover-as-in-example/#post-2101349

February 3, 2022 at 7:35 am #2103900

francesco

sorry if i answer you after days but i was sick because of the covid. having said that, unfortunately, nothing has changed.

February 3, 2022 at 7:36 am #2103905

francesco

https://fehu.it/

check if you can.
Author

Posts