# CSS Hover Issue

**URL:** <https://forum.wixstudio.com/t/css-hover-issue/75181>\
**Category:** Ask the community\
**Tags:** css, design, code, wix-studio\
**Created:** [November 24, 2025, 8:36pm UTC](https://forum.wixstudio.com/t/css-hover-issue/75181 "2025-11-24T20:36:33Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![dMbOndemand\_dMbOnDem](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/dmbondemand_dmbondem/32/112788_2.png) [@dMbOndemand\_dMbOnDem](https://forum.wixstudio.com/u/dMbOndemand_dMbOnDem)\
**Post date:** [November 24, 2025, 8:36pm UTC](https://forum.wixstudio.com/t/css-hover-issue/75181/1 "2025-11-24T20:36:33Z")

</div>

[SEE VIDEO FOR EXAMPLE](https://youtu.be/57m7WFt-uUw)

**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**

---

<div class="post-metadata">

**Author:** ![noahlovell](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/noahlovell/32/118920_2.png) [@noahlovell](https://forum.wixstudio.com/u/noahlovell)\
**Post date:** [November 26, 2025, 3:45pm UTC](https://forum.wixstudio.com/t/css-hover-issue/75181/3 "2025-11-26T15:45:04Z")

</div>

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 😉

 ![Screenshot 2025-11-26 at 15.44.25](https://us1.discourse-cdn.com/wix/original/3X/f/c/fc1c47b332f6c0a799d79520940812a3a5b676b7.png)