Hi, is it possible to change the background-color of the text of a slide while I move the mouse to the second one?
What I try to do is to use “linear-gradient”, below is the code I try to use:
unfortunately I can’t change the color when I try to go back to the first slide, can anyone help me?
Thank you.
Hi @ilariotresoldi,
Welcome to the forum.
Do you have a more complete example of your code? A link or maybe an example you could put on codepen or similar?
I know it’s probably clear in your mind what you are trying to achieve, but a more fleshed out example would help others with assisting you.
Hello, this is my code:
The problem is from how the mouseenter event interacts with the Swiper component, and to solve the problem you need to attach a mousemove event to the Swiper container rather than individual slides and then determine the slide under the mouse to calculate the gradient effect.
Here’s how you can do it:
The code binds the mousemove event to the .swiper-container , calculates the percentage of the mouse’s position relative to the container width, and determines which slide the mouse is currently hovering over. If the mouse is hovering over the active slide, it applies the gradient effect. If the mouse leaves the container, it resets the background of #title .
Good luck
Hi, thanks for your help, unfortunately it’s not what I need, my fault for explaining myself badly, I’ll try to be clearer: I would need a JS code that when dragging the slide from the white background it passes over the blue background you change the portion of text with another color, which is why I had hypothesized the use of linear-gradient, but I have difficulty calculating the percentage of text to change based on the position on the container.
code that when dragging the slide from the white background it passes over the blue background
I think we’ll need to see a working copy as I copied the code you posted and I don’t see the blue background so its hard to see what effect you are trying to achieve. A lot of the html doesn’t make sense in a responsive environment either so there seems to be something missing or you have copied some live html rather than source.
If you could get a working copy in codepen (like this half working code of yours that I have just pasted) then I’m sure one of the JS gurus here can point you in the right direction.
However it sounds to me as though you are trying to change the color of some ‘partial text’ as it travels over a coloured background and that would be difficult to achieve other than using mix-blend mode as in this recent demo of mine.
this is the problem, I have a div with a blue background and above a div with some text, this div must have two different colors as the slide moves:

The background-clip: text property is not fully supported in all browsers. You may need to consider a fallback for browsers that do not support these properties. However the browser support for them, This code will change the background of the text to your linear gradient when you hover over a .swiper-slide element, and then change it back when you stop hovering.
The above coding is just an example, hope this could help.
this div must have two different colors as the slide moves:
With mix blend mode you can have the color change but unfortunately you cannot specify the colors so all you get is the difference.This turns the white text black but keeps the blue text on the right

Assuming that was the effect you were going for anyway I can’t see any other way to change it and I don’t see that adding a background when you move it is going to do anything as the text is already cut off on the static view.
Thanks to all for our support
Powered by Discourse, best viewed with JavaScript enabled

source