[Support request] hover underline

Home Forums Support hover underline

Viewing 9 posts - 16 through 24 (of 24 total)
  • Author
    Posts
  • #1515442
    Elvin
    Staff
    Customer 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.

    A wise man once said:
    "Have you cleared your cache?"

    #1515449
    Matthieu

    This is the page where the links start :

    #1515462
    Elvin
    Staff
    Customer Support

    Try 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

    A wise man once said:
    "Have you cleared your cache?"

    #1515947
    Matthieu

    It 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)

    #1516770
    Elvin
    Staff
    Customer Support

    It 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.

    A wise man once said:
    "Have you cleared your cache?"

    #1516773
    Matthieu

    Hello, I just tried it not working as expected (see bottom of page to “plan du site”) :

    #1517069
    Elvin
    Staff
    Customer Support

    Hello, 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.

    A wise man once said:
    "Have you cleared your cache?"

    #1517401
    Matthieu

    That’s perfect, thank you so much ! 😃

    #1518201
    Elvin
    Staff
    Customer Support

    No problem. 🙂

    A wise man once said:
    "Have you cleared your cache?"

Viewing 9 posts - 16 through 24 (of 24 total)
  • You must be logged in to reply to this topic.