highlights's hyperlink appears - hover effect

Site URL: https://maracas-sparrow-583n.squarespace.com/projets

Hello 🙂 

How do I create a highlighting effect for a hyperlink that appears when the mouse is dragged over it? 

thanks in advance for your help

I've tried it, but it seems to have the opposite effect to what I want ^^ 

6 minutes ago, Rmng_ said:

I've tried it, but it seems to have the opposite effect to what I want ^^ 

What links are you wanting this effect on?

3 minutes ago, Ziggy said:

What links are you wanting this effect on?

I would like to add this effect on this page, hover all the text surrounded in red : https://maracas-sparrow-583n.squarespace.com/recherche-par-type-de-projet 

Try this Custom CSS:

// Link hover
section[data-section-id="66c333ee981842556112fc78"] {
  p a {
    position: relative;
    padding: 3px;
    margin: -3px;
    &, &:before {
      transition: all 0.3s;
    }
    &:before {
      content: '';
      display: block;
      position: absolute;
      top: 0%;
      right: 0;
      width: 0%;
      height: 100%;
      background: yellow;
      transition: width 0.3s;
      z-index: -1;
    }
    &:hover {
      &:before {
        width: 100%;
        right: auto;
        left: 0;
      }
    }
  }
}

Adapted from this: https://codepen.io/LegendOfLuis/pen/MWWPdRa

5 minutes ago, Ziggy said:

Try this Custom CSS:

// Link hover
section[data-section-id="66c333ee981842556112fc78"] {
  p a {
    position: relative;
    padding: 3px;
    margin: -3px;
    &, &:before {
      transition: all 0.3s;
    }
    &:before {
      content: '';
      display: block;
      position: absolute;
      top: 0%;
      right: 0;
      width: 0%;
      height: 100%;
      background: yellow;
      transition: width 0.3s;
      z-index: -1;
    }
    &:hover {
      &:before {
        width: 100%;
        right: auto;
        left: 0;
      }
    }
  }
}

Adapted from this: https://codepen.io/LegendOfLuis/pen/MWWPdRa

Sorry, I meant “underline” not highlights 

3 minutes ago, Rmng_ said:

Sorry, I meant “underline” not highlights 

13 minutes ago, Rmng_ said:

 

This already has an underline. Can you explain what you want?

2 minutes ago, Ziggy said:

This already has an underline. Can you explain what you want?

I'd like the underline to disappear completely. However when I move the mouse over it, I'd like the underline to reappear.

6 minutes ago, Ziggy said:

That can also be done:

section[data-section-id="66c333ee981842556112fc78"] {
  .sqs-block-html a {background-image:none!important;}
  p a, .sqsrte-small a, .sqsrte-large a {
    text-decoration: none!important;
    transition:ease-in-out 200ms;
    &:hover {
      border-bottom:1px solid #000;
    }
  }  
}

 

Thanks a lot 😄 it's working !