SOLVED: Change text color on hover

Ask the community
,
1

Hi,

I’m trying to change the hover color of element text18 on my website. I added the following to the Site code but it doesn’t work. Any ideas on how to get it working?

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

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

function unhoverText(){
let oldHtmlStr = $w(‘#text18’).html;
let newHtmlStr = oldHtmlStr.replace(/#F43F63/i, ‘#414141’);
console.log(newHtmlStr);
$w(‘#text18’).html = newHtmlStr;
}

1 Like
2

Hello,
You only have to replace This oldHtmlStr.replace(/#414141/i, ’ #F43F63 '); with this line

$w('#text18').html = "<h1 style='color:#F43F63'> Your Text in text18 </h1>";

hope this helps you.
Best,

Mustafa

3

Thanks Mustafa. I just realized that the ‘#text18’ is the ID for the whole text block on the page so that’s what is causing the issue. I just want to change the hover color on the links on the page which are enclosed within the tag. Any ideas?

4

In this case, the hover function works only for the whole text (#text18 element ), accessing the tag should be with css which is not supported .

5

Got it, thank you!

6

Hey Mustafa, thanks for your tip. It definitely helped me out. But I am running into an issues now – the color changes, but the “Your Text in text18” portion is odd because when I hover over my text, it completely changes the font and format to be vertical instead of horizontal. Do you know how I can preserve my text so it stays put? thanks!

7

Hi Rose,
Can i have the link of your website ? to get closer look at it.

8

Hi Mustafa,

Before:

1168×100 6.56 KB

After hover (and ALL stays that way):

1216×284 11.2 KB

9

Hi Rose,
As I can’t be sure about it without taking a look at your website, but most likely it happens because of the text size that exceeds the area you specified it for that text ( ALL ).

10

Hi Mustafa,
This page is a test page and has not been on the published site yet, hence the screen shots/photos. In the first photos the “all” fits fine, so I’m not sure why the text size changes when I enter the code.

11

If you are using the snippet code exactly as i mentioned before, then that make sense, because we are using the

tag. Try using

tag instead or modify the text size :

  $w('#text18').html = "<p style='color:#F43F63;font-size:3px'> Your Text in text18 </p>"
12

That worked! Thanks! Do you know how to specify the font as well?

13

All these specification of style goes under the Css, here is W3SCHOOLS where you can see how it work.

GoodLuck,
Mustafa

14

Is there a way to code this so that one code works with multiple different texts? I have several different textboxes that I would like to all change color when I hover over them (I’m essentially making a mini menu that I want to interact with filters for my dataset).

I’ve been trying to find a way to take the code you wrote above and apply the way I’ve been able to code for hiding/showing elements of similar IDs.

For example, if I have 2 different textboxes, one has an ID of ‘projectMenu1’ and says “Illustration” and one has an ID of ‘projectMenu2’ and says “Typography”

If I write a code intended to hide and show the 2 textboxes on hover, it would work like this:

function showText(index){
let $textbox = $w(’ #projectMenu ’ + index);
$textbox.show();
}

function hideText(index){
let $textbox = $w(’ #projectMenu ’ + index);
$textbox.hide();
}

export function projectMenu1_mouseIn(event) {
hideText(1);
}

export function projectMenu1_mouseOut(event) {
showText(1);
}

export function projectMenu2_mouseIn(event) {
hideText(2);
}

export function projectMenu2_mouseOut(event) {
showText(2);
}

But I can’t seem to implement this concept for changing color on hover.

I can’t seem to make it work with the $w.onReady( function (), so I tried doing it by applying the mouseIn and mouseOut functions to each textbox and it SORT OF works but the problem is keeping the two different texts that read “Illustration” and “Typography” and getting them each to continue to say that when hovered due to this part of the code:
let newHtmlStr = $w(‘#projectMenu’ + index).html = “

YOUR TEXT HERE
”;

What can I do so that projectMenu1 and projectMenu2 will each change color when you hover over them individually without changing what each say? Nothing that I have tried has been working.

15

Heyy I’m 15 year old and I know a few things about html and css
here’s how to do the font (I used futura as an example if you want me to do yours please let me know)
add the code in blue below into your own code

export function text48_mouseIn(event) {
 //Add your code for this event here: 
    $w('#text48').html = "<h2 style='color:#F43F63; font-family: Futura,Trebuchet MS,Arial,sans-serif; font-size: 30px'>WHY USE US!</h2>";
}

your welcome, this applies to every one too. I’m ready for any question :slight_smile: