Text color won't change on hover and ignores CSS... need help

Ask the community
, , , ,
1

Hello community! I need some help.

This is my first time building a website and I’m stuck on a CSS design - hope one of y’all can help me with it.

I wanted to change the color of a text and add some animation when your mouse is above it (mousehover), so I used the following code:

image
image369×108 3.28 KB

But unfortunately it applies everything except the “new” color of the text (color: #ff00e8, before it is #ffffff). I don’t know how to fix this problem cause I don’t see any mistake in the code. I just have the feeling wix studio only allows the text color from their website menu and ignores the text color from the css code.

Below you’ll find the entire css code:

.titlehero {
    padding: 0px 0px;
    background-color: transparent;
    color: #F0F0F0;
    border: none;
    letter-spacing: 4px;
    overflow: hidden;
    transition: 0.5s;
    cursor: pointer;
    text-shadow: 0 0 8px #F0F0F0, 0 0 2px #F0F0F0;
}
.parahero {
    padding: 0px 0px;
    background-color: transparent;
    color: #F0F0F0;
    border: none;
    letter-spacing: 4px;
    overflow: hidden;
    transition: 0.5s;
    cursor: pointer;
    text-shadow: 0 0 8px #F0F0F0, 0 0 2px #F0F0F0;
}
.headermenu {
    padding: 0px 0px;
    background-color: transparent;
    color: #F0F0F0;
    border: none;
    letter-spacing: 4px;
    overflow: hidden;
    transition: 0.5s;
    cursor: pointer;
    text-shadow: 0 0 5px #F0F0F0, 0 0 2px #F0F0F0;
}

.headermenu:hover {
    color: #ff00e8;
    text-shadow: 0 0 5px #ff00e8, 0 0 2px #ff00e8;
    transition: 0.3s ease-in-out;
    scale: 115%;
}

.abouttxt {
    padding: 0px 0px;
    background-color: transparent;
    color: #F0F0F0;
    border: none;
    letter-spacing: 4px;
    overflow: hidden;
    transition: 0.5s;
    text-shadow: 0 0 2px #F0F0F0, 0 0 10px #F0F0F0; 
}

.ustxt {
    padding: 0px 0px;
    background-color: transparent;
    color: #ff00e8;
    border: none;
    letter-spacing: 4px;
    overflow: hidden;
    transition: 0.5s;
    text-shadow: 0 0 2px #ff00e8, 0 0 10px #ff00e8;
}

Can somebody help me figure out what the solution to this problem is?

Thanks! (:

2

Hi, @ONDORA_STUDIOS !!

For a regular text element, you can change its color on hover by doing this.

.someClassForText .rich-text__text:hover {
    color: red;
}
3

Hi @onemoretime ,
first of all thanks for a response that quick! However, this worked perfectly and solved the problem, now I know that for some cases I have to use the global text classes too. I thought maybe it would be enough to only create new ones.

Have a great day!

best regards

Fynn

1 Like