Underline text while hovering with mouse on it

Ask the community
,
1

Hello people. I’ve seen some code about that problem i have and I cant get it to work.

$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;	
}

In addition to that I ve written something else which Im sure makes my website slower. When i hover in one text I hide it and behind that there is one with underline and I appear that as the code shows below. If anyone has any idea how to get the above code to run because it has no error just doesnt work on my pages or any other tip would appreciate it.

export function text45_mouseIn(event) {
$w(‘#text46’).hide();
$w(‘#text46’).show();
}

export function text46_mouseOut(event) {
$w(‘#text46’).hide();
$w(‘#text45’).show();
}

2

It seems that this is an ongoing issue with Wix Code somewhere as it has happened to others too.

https://www.wix.com/code/home/forum/community-discussion/how-to-use-onmousein-to-create-underline-on-a-tag-hover
https://www.wix.com/code/home/forum/community-discussion/text-underline-hover-effect

If you have got it working as a workaround for now with the two texts being shown and hidden on mouse in and mouse out, then I would just carry on and use that for the time being until you can get a definite answer as to why it doesn’t work as it looks correct from the other pages code samples.

So, in theory you would not need to use any of the code above on your page, just the onReady function and then your show and hide parts above with the mouse in and mouse out functions turned on in the properties panel for the elements.

Remember also, that if you need to have it clicked as a link, then you will need to add the onClick function to the underlined text which is hidden until the mouse is moved over it.

With mobile devices, you can do it a bit different too with code as shown in this example:
https://support.wix.com/en/article/wix-code-writing-code-that-only-runs-on-mobile-devices

3

Thank you for your answer. By the way i didnt use the onClick for the links just ive put the text linked to another page and you can still click it.