Change Text Color on MouseIn

Ask the community
,
1

I’ve spent hours trying to get this to work with no success. All I want to do is change the color of the text in a text box when someone hovers over it. Here’s some code I tried:

export function text41_onmouseIn(event, $w) {
let text41 = event.text41; // “text41”
$w(“text41”).html = <p style = "color:red"> ${$w("text41).text}</p>;";

Please help!
I’m also looking for a Wix Code expert. I’d really like to learn more and then speak at the local Atlanta Wix Meetups. Thanks!

2

Hey Simone,

Looks like you have a bunch of errors in your code.

This should help you get on your way:

export function text41_mouseIn(event, $w) {
  $w("#text41").html = `<p style = "color:red"> ${$w("#text41").text}</p>`;
}

You still might have to tweak it a bit to get it to work exactly how you want.

If there’s something you don’t understand, please feel free to ask.

3

Hi Simone,

If you’re still looking for Wix Code experts… You can check out the WixArena - it’s a hub where you can look for Wix Code (and other) experts for hire.

Yisrael

4

Thanks Sam and Yisrael!

Is there a “callback” feature for the MouseOut event?

5

$w.TextBox.onMouseOut()

6

Unfortunately that didn’t work - or I’m not using the directions properly.
Also, when I use the code above, from Sam, it changes the alignment and size of the text…
export function text41_mouseIn(event, $w) {
$w(“#text41”).html = <p style = "color:#15D3D0"> ${$w("#text41").text}</p>;

}

export function Text41_mouseOut(event, $w) {
$w(“#text41”).html = <p style = "color:#545454"> ${$w("#text41").text}</p>;

The other day the mouse out was working, now it’s not and I haven’t changed anything!

7

Hi,
If you want to stay on the same size you need to set the HTML for the same size( h1/2/3 etc.).
Check out this code:

export function text41_mouseIn(event) {
	$w("#text41").html = `<h1 style = "color:red"> ${$w("#text41").text}</h1>`;
	
}

export function text41_mouseOut(event, $w) {
	$w("#text41").html = `<h1 style = "color:black"> ${$w("#text41").text}</h1>`;
}

Good luck

8

This works, but is it possible to do this without having to type the text replacing it? – ${$w(“#text41”).text

or that’s needed?

9

Thanks