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 = " ";
}
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: <h3><span style="color:#FF4040;">Heading 3</span></h3>
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();}); });
2. 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.
Hi! I would like to know how can i delete this border shadow around all buttons and placeholders. Thanks!!!