[Support request] hover underline

Home Forums Support hover underline

Viewing 15 posts - 1 through 15 (of 24 total)
  • Author
    Posts
  • #1513912
    Matthieu

    Hello, I would like to know if it was possible to apply an underline effect to a word or text on mouse over ?

    Thanks

    #1513949
    Elvin
    Staff
    Customer Support

    Hi,

    If its a link throughout the whole site, you can set the link hover color on Dashboard > Appearance > Colors > Body. You should be able to see a “Link color hover” state that lets you change the :hover color of links.

    If its a specific text you want this applied, you may have to use Custom CSS.

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

    #1514301
    Matthieu

    Hello for the allocation of colors there is no problem. On the other hand, the effect I would like to have is a relief effect like this : https://www.lunaweb.fr/

    Thanks

    #1514987
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    They’re doing something like this I believe:

    .entry-content a {
        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-ine;
    }
    
    .entry-content a:hover {
        background-position: 0% bottom;
        text-decoration: none;
        -webkit-transition-duration: 750ms, 250ms;
        transition-duration: 750ms, 250ms;
    }
    #1515036
    Matthieu

    Thank you for your reply. The css must be in appearance> customize> additional css ?

    Is it possible to attribute the effect to a single word ?

    Thanks

    #1515236
    Elvin
    Staff
    Customer Support

    Hi,

    If you must target a specific word, consider adding format to it on the editor. Like wrapping it in span so we could target it w/ CSS.

    Alternatively, you can try direct string replacement on all of your contents w/ PHP snippets.

    Something like this one:

    add_filter('the_content',function(){
    $str = 'Comedy';
    $pattern = '/\s?\b'.$str.'\b\s?/i';
    	if(preg_match_all($pattern, $str, $matches)){
    		foreach ($matches as $target){ return str_replace($str, '<span class="hover-effect">'.$str.'</span>', get_the_content() ); }		
    	}
    });

    This code looks for the text “Comedy” in your content and wraps it in <span class="hover-effect">.

    Note: if you want to reuse this, you can change the $str = 'Comedy'; from ‘Comedy’ to any word.

    Once the specific text is wrapped in with a selector, you can target to add CSS like this:

    .entry-content span.hover-effect {
        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-ine;
    }
    
    .entry-content span.hover-effect:hover {
        background-position: 0% bottom;
        text-decoration: none;
        -webkit-transition-duration: 750ms, 250ms;
        transition-duration: 750ms, 250ms;
    }

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

    #1515251
    Matthieu

    It seems to work for one word, is there a possibility to be able to have the effect on several words at the same time ?

    Thanks

    #1515307
    Elvin
    Staff
    Customer Support

    It seems to work for one word, is there a possibility to be able to have the effect on several words at the same time ?

    To clarify: Are these words all in one phrase or words that are scattered throughout the content? Also, are these words “links” or are they just plain words?

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

    #1515309
    Matthieu

    So these words are precise links, example: In the sentence “Design of print & web projects”

    The link is on: “print & web” it is on these words that I would like to have the effect

    And that on other words contained in other sentences of the site

    Thanks

    #1515320
    Elvin
    Staff
    Customer Support

    Oh that’s good then.

    If they’re already links then we can modify what Tom provided.

    We just need to add specificity to the CSS code by adding a unique attribute selector.

    Example: Instead of using a less specified .entry-content a, we can use .entry-content a[href='https://www.google.com']

    .entry-content a[href='/your-url-here'] {
        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='/your-url-here']:hover {
        background-position: 0% bottom;
        text-decoration: none;
        -webkit-transition-duration: 750ms, 250ms;
        transition-duration: 750ms, 250ms;
    }

    Just replace the value /your-url-here with the URL of the text link you want to add the hover underline style to.

    Here’s how to add CSS – https://docs.generatepress.com/article/adding-css/

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

    #1515396
    Matthieu

    Thanks for your reply, it works fine for the link. If ever I have several links, therefore [href = ‘/ your-url-here’] to add, how should I proceed ?

    #1515402
    Elvin
    Staff
    Customer Support

    Thanks for your reply, it works fine for the link. If ever I have several links, therefore [href = ‘/ your-url-here’] to add, how should I proceed ?

    You can do something like this:

    .entry-content a[href='/your-url-here'], .entry-content a[href='/another-url-here'], .entry-content a[href='/more-url-here'] {
       ...
    }
    
    .entry-content a[href='/your-url-here']:hover, .entry-content a[href='/another-url-here']:hover, .entry-content a[href='/more-url-here']:hover {
       ...
    }

    You simply add comma for the other links you want to specifically style.

    If in case you want to go back to just styling all of the links in the content the same way, you can use Tom’s code that uses .entry-content a. 🙂

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

    #1515418
    Matthieu

    I don’t feel like it works for me adding .entry-content to [href = ‘/ your-url-here’], .entry-content to [href = ‘/ your-url-here’] ,

    #1515421
    Elvin
    Staff
    Customer Support

    Try changing the code to this.

    .entry-content > a[href='/your-url-here'], a[href='/another-url-here'], a[href='/more-url-here'] {
    /*style here*/
    }
    .entry-content > a[href='/your-url-here']:hover, a[href='/another-url-here']:hover, a[href='/more-url-here']:hover {
    /*on hover style here*/
    }

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

    #1515439
    Matthieu

    It only works on one link out of both.

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