Change text color on hover non destructively

Discussion Ask a question
,
1

Hi All,

I’m trying out the new coding tools. I just want to change the text color on hover, Ive setup a mouse event and I created an ID for the text element. The issue is, when I try to add code to change the color and then preview and hover over the element it seems to erase all the previous attributes already specified in the GUI editor.
Is there a way to add a color change without having to totally reformat text element from scratch?

Current text attributes: Heading 2, font size 55, font type lulo clean, links to https://github.com , also has a new line and right alignment

Here is the function without any specific code:

export function codePortfolioText_mouseIn(event, $w) {
//Add your code for this event here:
$w(‘#codePortfolioText’).html = " ";
}

2

Hi,
Firstly, I would use console.log to know what’s the HTML code of the relevant text element.
Lets say that the HTML code of the text is:

Heading 3


There’s a need to change the string to change the text color:

  1. Adding an onMouseIn and onMouseOut to the onReady function:
$w.onReady(function () {
	$w('#text2').onMouseIn(()=>{hoverTxt();});
	$w('#text2').onMouseOut(()=>{unhoverText();});
});
  1. Editing the color of the text by changing the string:
function hoverTxt(){
	let oldHtmlStr = $w('#text2').html;
	let newHtmlStr = oldHtmlStr.replace(/#FF4040/i, '#000000');
	console.log(newHtmlStr);
	$w('#text2').html = newHtmlStr;
}

function unhoverText(){
	let oldHtmlStr = $w('#text2').html;
	let newHtmlStr = oldHtmlStr.replace(/#000000/i, '#FF4040');
	console.log(newHtmlStr);
	$w('#text2').html = newHtmlStr;
}

I hope it’s clear.

Good luck!
Tal.

3

Hi! I would like to know how can i delete this border shadow around all buttons and placeholders. Thanks!!!

4

Hi Tal,

I am using the above and works like a bomb.
However, if i have multiple texts I want to apply this too (#text3,#text4,#text5) - Can I do this without having to create a new function for each?

5

Hi Tal, i was wonderin if there is a way to make a const to change the value of text color based ina predefined const. like if I predefine a lot of color schemes, and with different onClick buttons, the [[[[ let newHtmlStr = oldHtmlStr.replace(/#FF4040/i, ‘#000000’); ]]]] would get it from the value of the button instead of a writen one. This way I don’t need to write this same code for each button, and if I have like 15 buttons of colorchange, it would be much cleaner.

(what im actually ayming is to make a site that change color schemes and BGM audio from background, text, buttons and all other ellements by clicking determined buttons. So if user selects “vintage” => the whole page goes vintage. Text is the main issue i’m having right now)

Thank you for any help, I imagine it’s a bit complicated to make it work.