Color hover effect on text diabling hyperlink tool

Discussion Ask a question
,
1

I applied the following code to change the color of text when the mouse is hovering over it.

$w.onReady(function () {
$w(‘#text1’).onMouseIn(()=>{hoverTxt();});
$w(‘#text1’).onMouseOut(()=>{unhoverText();});
});

function hoverTxt(){
let oldHtmlStr = $w(‘#text1’).html;
let newHtmlStr = oldHtmlStr.replace(/#E0760D/i, ‘#402858’);
console.log(newHtmlStr);
$w(‘#text1’).html = newHtmlStr;
}

function unhoverText(){
let oldHtmlStr = $w(‘#text1’).html;
let newHtmlStr = oldHtmlStr.replace(/#402858/i, ‘#E0760D’);
console.log(newHtmlStr);
$w(‘#text1’).html = newHtmlStr;
}
This code completely works, but seems to interfere with Wix’s built in Text Link tool. I’m not sure if the code may be interfering somehow with the Link tool, but the hyperlink functions only without the hover code running. Looking for someone with more coding experience than me to help point out something I may be missing!

2

Hi Sarah,
Your code is good, There is an issue in our side and we are working on a fix and it might take a while.
My suggestion as a workaround is to link those text elements with an onClick event.

import wixLocation from 'wix-location';
$w.onReady(()=> {
  $w('#textElement').onClick(() => {
    wixLocation.to('yourPath')
  });
});

For more information about wixlocation.to:

We will update this thread when a fix will released.
Sorry for the inconvenience,
Roi.

3

Thanks Roi!!

4

Hi Wix Corvid Team, has this issue been resolved? I am hoping to add code to my site to that every single hyperlink will change colour on hover (or mousein). Let me know! Thank you.
published site: unionyogastudio[dot]ca

5

This thread is super old, it’ll be better if you open a new thread and explain the issue.