**Textlink stops working after I add code to the text. Can anyone help me?**

Hello all!

The Textlink stops working after I add code to the text. Can anyone help me?
On my landing page, I have a text witch is linked to a subdirectory.
Because I want the Hover-Over color change for this text to be instant i used following code:

$w.onReady(function () {

$w('#titleKreatives').onMouseIn(() => { hoverTxt(); });
$w('#titleKreatives').onMouseOut(() => { unhoverText(); });

function hoverTxt() {
    let oldHtmlStr = $w('#titleKreatives').html;
    let newHtmlStr = $w('#titleKreatives').html = "<h1 style='color:#000000'> KREATIVES </h1>";
    console.log(newHtmlStr);
    $w('#titleKreatives').html = newHtmlStr;
}

function unhoverText() {
    let oldHtmlStr = $w('#titleKreatives').html;
    let newHtmlStr = $w('#titleKreatives').html = "<h1 style='color:#ffffff'> KREATIVES </h1>";
    console.log(newHtmlStr);
    $w('#titleKreatives').html = newHtmlStr;
}

});

The code itself works perfectly!
But after I add the code, the textlink to the subdirectory doesnt work anymore…any idea why?

Product:
Wix Studio

What are you trying to achieve:
I want to have both the instant Hover-Over effect and the textlink working together.

What have you already tried:
I tried this, but it didnt work for me.
And i tried to find a solution on here, but also nothing.

Additional information:
I’m new to the whole “coding world”. Im just learning how to navigate and use wix velo.
So im very thankful for any advice or correction! Thank you all!

Welcome to the community.
Have you tried just using the in built hover animations with the text ? if you set the easing to linear it will be instant color change.

with your coding the issue is setting the html property of the text element overides the link functionality.

maybe something like this

$w.onReady(function () {
    $w('#titleKreatives').link = "/your-subdirectory"; // replace with your actual subdirectory path

    $w('#titleKreatives').onMouseIn(() => { 
        hoverTxt(); 
    });
    $w('#titleKreatives').onMouseOut(() => { 
        unhoverText(); 
    });

    function hoverTxt() {
        $w('#titleKreatives').html = `<h1 style="color:#000000;">KREATIVES</h1>`;  
    }

    function unhoverText() {
        $w('#titleKreatives').html = `<h1 style="color:#ffffff;">KREATIVES</h1>`;  
    }
});

Hey Dan, thanks for the reply!

I tried the built in hover animation with both text and button + I tried to customize the animations as well.
I managed to make the hover in animation instant, but I couldnt get the hover out animation to be instant.

So I tried your code, and it tells me this:

For some reason the .link doesnt work…
How would you go about to find out what code i need for a textlink?

Thank you!
Raffael

ah yes, Wix text elements dont support the .link property. maybe you can add the text in a container and link that instead.