- This topic has 23 replies, 3 voices, and was last updated 3 years, 5 months ago by Elvin.
-
AuthorPosts
-
November 2, 2020 at 6:45 pm #1515442ElvinStaffCustomer Support
I can’t seem to find this text link for the shop to actually test the selectors.
Can you point me to the site where the
https://www.mmgraphik.com/shop/
link is placed?Screenshots or recordings of which links to style would help too. 🙂
Perhaps we’re using the wrong selectors.
.entry-content a
is meant to be used for links inside the content area. If you want to style links on different parts of the site, we’ll have to check which selectors they use and style it from there.November 2, 2020 at 7:00 pm #1515449MatthieuThis is the page where the links start :
November 2, 2020 at 7:25 pm #1515462ElvinStaffCustomer SupportTry this CSS:
.entry-content a[href='https://www.mmgraphik.com/a-propos/'], .entry-content a[href='https://www.mmgraphik.com/shop/']{ background-image: linear-gradient(to right, #2e55ff 33.333%, transparent 33.333%, transparent 66.666%, #2e55ff 66.666%); background-repeat: no-repeat; background-position: 100% bottom; background-size: 300% 1px; transition-property: background-position, color; transition-duration: 0ms, 250ms; transition-timing-function: ease-out, ease-in; } .entry-content a[href='https://www.mmgraphik.com/a-propos/']:hover, .entry-content a[href='https://www.mmgraphik.com/shop/']:hover { background-position: 0% bottom; text-decoration: none; -webkit-transition-duration: 750ms, 250ms; transition-duration: 750ms, 250ms; }
Here’s a demo video of it: https://share.getcloudapp.com/2Nujo1L5
November 3, 2020 at 5:39 am #1515947MatthieuIt works perfectly thank you very much ! Last quick question: If I want to have this effect in the footer or in a footer element, is it possible ? (I tried by copying and pasting the link to redo the same manipulation but it does not work)
November 3, 2020 at 1:03 pm #1516770ElvinStaffCustomer SupportIt works perfectly thank you very much ! Last quick question: If I want to have this effect in the footer or in a footer element, is it possible ? (I tried by copying and pasting the link to redo the same manipulation but it does not work)
Using
.site-footer a
and.site-footer a:hover
as the selector/s should work for the footer if you want this to apply on the footer links.November 3, 2020 at 1:08 pm #1516773MatthieuHello, I just tried it not working as expected (see bottom of page to “plan du site”) :
November 3, 2020 at 7:23 pm #1517069ElvinStaffCustomer SupportHello, I just tried it not working as expected (see bottom of page to “plan du site”) :
The selector styling it is slightly wrong.
.site-footer a:hover[href='https://www.mmgraphik.com/plan-du-site/']
should be.site-footer a[href='https://www.mmgraphik.com/plan-du-site/']:hover
Also, I see you’re using a child theme and autoptimize. That said, after adding the change, make sure to clear cache if in case the CSS change doesn’t apply on the live site.
November 4, 2020 at 3:28 am #1517401MatthieuThat’s perfect, thank you so much ! 😃
November 4, 2020 at 12:35 pm #1518201ElvinStaffCustomer SupportNo problem. 🙂
-
AuthorPosts
- You must be logged in to reply to this topic.