CSS Hover Issue

SEE VIDEO FOR EXAMPLE

I’m having trouble with stopping text fields from changing color on hover. I was able to get a gradient background and white text upon hover but when the cursor goes over the text it zaps the gradient back to solid white.
Briefly explain what’s not working or where you’re stuck

Working in
e.g. Wix Studio Editor, global.css

Site link
If this is happening on a site, include a live or test site link

What I’m trying to do
Just a simple gradient bg, white text on hover of a box without the bg turning white when hovering over text.

What I’ve tried so far
.gradienthover.box:hover {
background: linear-gradient(90deg, #0859e4 0%, #4ff28e 100%);
}

.gradienthover .text14,
.gradienthover .text15 {
color: #fff;
}


.gradienthover.box {

background: none; /* Ensure no default background */

}

.gradienthover.box:hover,

.gradienthover.box:hover .text14,

.gradienthover.box:hover .text15 {

color: #fff; /\* Text turns white \*/

}

.gradienthover.box:hover {

background: linear-gradient(90deg, #0859e4, #4ff28e);

}

Extra context

I believe the text is preventing the box from being the hover trigger.

I’m curious why CSS rather than the native animations?

If you apply a hover, and choose “Custom animation”, you can set the background to a gradient, and text to white. It does the same as the CSS, but through the editor UI and works :wink: