Change color of repeater item

Ask the community
,
1

I would just like to know how to change the background color of my repeater items when I hover over them

I saw a lot of stuff about wix-animations but i would only like to change the color of my repeater items.

My ID :
Repeater : #walletRepeater
Item Repeater : #walletItem

A generous soul to help me please. Thanks you
2

You can add a #box item over the container of the repeater. Then add a onMouseIn( ) and onMouseOut( ) and add the following code.

$w (“#myElement”). style . backgroundColor= “rgba(255,0,0,0.5)”;

Source:

3

Thank you very much for your answer.

Only, it seems that the MouseIn and MouseOut functions act on all the articles of the repeater.

I was inspired by an example on wix to apparently better target the articles one by one

And replacing the onChange function with a MouseIn function I have the same problem.

I’m afraid this is not possible with a MouseIn, MouseOut function

Source : https://www.wix.com/velo/example/repeater-context

Has anyone managed to do this for their site?

That said with a switch and checkbox, it works. Too bad it doesn't work with a simple MouseIn function
4

Try replacing $w by $item and adding it under an OnItemReady event and add the event to your page’s onReady function. Full code (Not tested):

$w.onReady(function(){

$w("#YOURREPEATER").onItemReady( ($item, itemData, index) => {
$item("#THEBOX").onMouseIn((event)=>{
$item("#THEBOX").style.backgroundColor="rgba(255,0,0,0.5)"; // SET HOVER RGB COLOR
})
$item("#THEBOX").onMouseOut((event)=>{
$item("#THEBOX").style.backgroundColor="rgba(255,0,0,0.5)"; // SET DEFAULT RGB COLOR
})
})

})
5

It’s really super nice to try to help me ^^

But the code is not working correctly.

The mouseIn function does the job but the articles do not return to their basic state.

As a result, the mouseOut function does not apply.
Thank you anyway for trying to help me, that's nice ☺️
6

I just found out how to do it, and I have to say it’s also a bit thanks to you, thank you.

In reality, it works, but on condition of adding a box inside the article.

With a show or hide function, it works, it does it one by one

$w(“#walletRepeater”).onItemReady( ($item, itemData, index) => {
$item(“#walletItem”).onMouseIn((event)=>{
$item(“#hoverBox”).show(); // BOX INSIDE THE ITEM
})
$item(“#walletItem”).onMouseOut((event)=>{
$item(“#hoverBox”).hide(); // BOX INSIDE THE ITEM
})
})

})