How to use onMouseIn() to create underline on <a> tag hover

Ask the community
,
1

Does anyone know how to use JavaScript to create a hover effect on the links on my site? https://msdunfee.wixsite.com/index

I would like the links to be underlined when the mouse hovers over it.

Thanks in advance! If you could leave example code that would be awesome. I cannot figure out how to do this from following the documentation here Text - Velo API Reference - Wix.com

2

Hey,
You can simply edit the HTML code of the text element and add the decoration css attribute with the value of “underline”:

$w.onReady(function () {
	//removing the underline when the page is ready
	removeUnderline();
	//removing the underline when not hovering the text
	$w('#text1').onMouseOut(()=>{removeUnderline();});
	//adding the underline when hovering the text
	$w('#text1').onMouseIn(()=>{addUnderline();});
});

function removeUnderline(){
	let oldHtmlStr = $w('#text1').html;
	let newHtmlStr = oldHtmlStr.replace( /underline/i, 'none');	
	$w('#text1').html = newHtmlStr;	
}

function addUnderline(){
	let oldHtmlStr = $w('#text1').html;
	let newHtmlStr = oldHtmlStr.replace( /none/i, 'underline');	
	$w('#text1').html = newHtmlStr;	
}

This code will add the underline only when hovering the text element. Note that the hyperlink itself is added to the text element using the editor.

Good luck!
Tal.

3

Thanks, Tal! Is there a way to target the tag or href instead of the text element in the script? I am using the Wix list feature to create content and the links are embedded within that list feature so I cannot directly edit the text element.

4

Hi Alex,
There’s a text element for a repeater as you can see here:

1550×1030 303 KB

The functions are pretty much the same, the difference is that you need to set it for the repeater using the onItemReady function.

Best,
Tal.

5

Thank you. I’ll see if I can figure it out!

6

This does not work because my entire list is contained within a single element called #list1 (see image below) so I cannot target the link element specifically.

1053×417 103 KB

I am using the list element that is actually advertised to use for employee bios:

548×534 61.9 KB

And am putting the link within the “subtitle” field:

1168×566 74.4 KB

This is why I wanted to target all tags or hrefs instead because I know that will cover links across the board on my entire site without having to go back and rewrite any other scripts. However, I am open to other solutions if this is not possible. Although I do not see how the code previously mentioned in this thread will solve the issue as it is currently suggested.

7

Even better - the ability to be able to create custom CSS files would solve this and so much more (I have submitted this feature request, as have others). I hope to see this implemented in the future as it would make Wix a powerful competitor in the “online website builder” market. Creating silly JavaScript workarounds like this is a giant waste of time and effort (for both of us) as the solution could be as simple as one line of CSS…
a:hover {text-decoration: underline;}

But I digress…I do greatly appreciate your help on this issue and hope we can come to a solution. I am just getting frustrated after several hours of trying to make this work when the solution should be much more simple and wanted to voice my concerns to the people of Wix.

8

Hi Tal,

The code you wrote for adding the underline only when hovering the text element worked great; however, I cannot figure out how to repeat this same code for 10 different text boxes on the same page. I tried using a wild card, but was unsuccessful. Any chance you could revisit your code posted above and assist me with this issue.

Also, once this code is in place, the hyperlink that is edited through the text element editor…no longer works.

Thanks,
Steve

9

Hi Tal,
I tried following your instructions, copied your code and added the correct text element to it, but nothing’s happening when I test it in the Preview mode. I’ve got a repeater with 3 containers and each container has a text element where I’ve listed some items that I’ve added a hyperlink to. Now I’d just need for the items to be underlined when hovered over so the user realizes there’s a link behind it.
I’m not sure how to use the onItemReady function.
Do you have any advice?
Thank you,
Shiran