Hey all,
I am working on a new website and try to find a way to change the site’s background when hovering over some elements (buttons, menu elements, ecs’)
I tried to use the .background and .style but always get an error.
I was wondering, maybe one of you can help me with this issue…
thanks
you can place a shape on your page, stretch it out so that it covers the entire page, then use .style to modify the color
that’s a good idea! thanks, i will try.
I hope to find a way to adjust the size to the screen
actually, it’s not a good solution for me. as i want to change the BG to images and shapes have only color values. there is no way to handle the site BG directly?
@goonberlin
haven’t seen a way to access it but someone else might know.
one other alternative is just to place a hidden image on the screen and then show the image onMouseIn
@mikemoynihan99 yeah, but it’s a bit dirty 
thank you
@goonberlin Hey I am working on trying to do the same thing but no luck. Have you found a way to do this or a solution?
Thanks in advance!
Hey if you are using strip, this may be useful →
https://www.wix.com/corvid/reference/$w/columnstrip/background
@ajithkrr Thanks so much this might be exactly what I need! Do you know how to have an element tied to this so when you hover over the element it changes the background? I know this code will take care of the background image just not sure how the individual element links to it.
I think you have to change the background of the strip if the mouse hovers on a button. Right ? If so, you should add a button to that strip. Then add onmousein function from the properties panel (for the respective button) →
export function button1_mouseIn(event) {
$w('#columnStrip2').background.src = "wix:image://v1/68d3a9_1de7529c444b4c9eb38401f8efe0cad2.jpg/flowers.jpg#originWidth=1970&originHeight=1120";
}
Then you have to add a onMouseOut function →
export function button1_mouseOut(event) {
$w('#columnStrip2').background.src = "wix:image://v1/68d3a9_1de7529c444b4c9eb38401f8efe0cad2.jpg/flowers.jpg#originWidth=1970&originHeight=1120";
}
(Don’t copy the export function button1_mouseOut or mouseIn(event) from here.
Follow the steps in the image.
Post if it works !!!
@ajithkrr
This worked perfectly! You are amazing, I totally did not think of onMouseIn and onMouseOut what a great solution! Thanks so much!
Welcome !!!
How can I achieve something like this - https://www.allisamazing.com/
You can create buttons and add different onMouseIn event for all buttons and change the background image each time with a different source.