[Support request] Help with hover for hiperlinks

Home Forums Support Help with hover for hiperlinks

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #575081
    pancakebg

    Hey guys, i know u don’t have to answer to this question cuz it’s not about any kind of situation with GP. I would be very grateful if u can help me with this.

    I’m using this CSS line for hover effect on the anchor links on my site.

    a {
    display: inline-block;
    text-decoration:none
    }
    a:after {
    content: “”;
    display: block;
    width: 0;
    border-bottom: 1px solid;
    margin: 0 auto;
    transition:all 0.3s linear 0s;
    }
    .inside-article a:hover:after {
    width: 100%;
    }

    The problem is i get the effect on the links on the articles in the blog categories.
    – the title.
    – the photo.
    – and the “read more” button.

    And it does not look good.
    Is there a way to get the effect only for links in the main content area (container) like in the picture here:

    https://s31.postimg.cc/lsraj2lrf/PLS.jpg

    Thank you!

    GeneratePress 2.1.1
    GP Premium 1.6.2
    #575083
    David
    Staff
    Customer Support

    Hi, you can try targeting just the single post elements with something like this:

    .single-post .inside-article a:after {
        content: '';
        display: block;
        width: 0;
        border-bottom: 1px solid;
        margin: 0 auto;
        transition:all 0.3s linear 0s;
    }
    .single-post .inside-article a:hover:after {
        width: 100%;
    }
    #575087
    pancakebg

    I will try that right now, thank you David!

    #575094
    pancakebg

    It worked great, thanks again! 🙂

    Best support ever!

    #575098
    pancakebg

    But now i don’t have the hover effect on some articles which are written on pages.

    Can i add some page ID to make an exception or something?

    #575111
    David
    Staff
    Customer Support

    You could try this, it should add it to articles except those on archives:

    body:not(.blog) .inside-article a:after,
    body:not(.archive) .inside-article a:after, {
        content: '';
        display: block;
        width: 0;
        border-bottom: 1px solid;
        margin: 0 auto;
        transition:all 0.3s linear 0s;
    }
    body:not(.blog) .inside-article a:hover:after,
    body:not(.archive) .inside-article a:hover:after {
        width: 100%;
    }
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.