Hi! I have no know-how about coding, never done it, but I would like to have an image and text that change color upon hover just like in the website below.
I’ve searched for something like this in the available wix hover boxes but haven’t found anything. Therefore I would be very grateful if someone could tell me how to do this, along with the coding that’s required so that I can simply copy and paste that coding onto my website. Please note how the text and image both change color even if the mouse moves across only the image or text.
PS. this is part of my IGCSE Global Perspectives project so timely help will be appreciated!
Simply use onMouseIn on the image box and text box elements or a container box element through the properties panel for it.
The white overlay on the image can already be done through Wix Editor with it’s own settings for hover, however for the text box below just make up two of the same, one with the normal black text and the other one with the coloured text which is set in its properties panel to be hidden on load.
Then when the mouse is moved over the image or the text box, or a container box if you have attached both the image and text boxes to it, then simply have the onMouseIn event handler show the coloured text instead of the normal text.
See here for a tutorial about it.
https://www.wix.com/corvid/example/hide-and-show-elements
https://www.wix.com/corvid/reference/$w.Element.html#onMouseIn
https://www.wix.com/corvid/reference/$w.Element.html#onMouseOut
https://www.wix.com/corvid/reference/$w.HiddenMixin.html
Note that onMouse will not work with mobile devices so you will either need to not use it on mobile or do a different design for it using onClick instead.
See here for more info.
https://www.wix.com/corvid/reference/wix-window.html#formFactor
https://support.wix.com/en/article/corvid-tutorial-displaying-elements-in-mobile-only
thank you soo much i’ll do it and let you know if I face any problems