Link text underlined

Discussion Ask a question
1

Hi, Is there any way to make the link text underlined when you hover the mouse over it?

Thanks,

Ahmi

1 Like
2

Hi ahmi, using velo you can make the link text underlined when you hover the mouse over it.

 $w.onReady(async function () {
   $w('#text3').onMouseIn( () => {
     $w('#text3').html = '<a href="https://www.sitesonx.com"><h2 style="text-decoration: underline;">' + $w('#text3').text + '</h2></a>';
   })
   $w('#text3').onMouseOut( () => {
     $w('#text3').html = '<h2>' + $w('#text3').text + '</h2>';
   })
 } );

To make it more clear:

  1. Add the required text.
  2. Turn on Dev Mode:

810×772 48.3 KB

3. Add the code from the top, change the id to be the same as yours:

758×256 15.4 KB

Here is the final result:
https://edensh0.editorx.io/link-text-underlined

Also, it is important to mention that soon you will be able to create this using code-free hover interactions.

Hope it was clear,
Let me know if you have any more questions :slight_smile:

6 Likes
3

Thanks for the help!!
It worked.

4

Is there anyway to use this but target specific words in the text area (for example #text3 ) to make multiple links within it?