onMouseIn/Out inside a repeater

Ask the community
,
1

Looking to rollover images in the repeater to show a popup box with a bio. They all have the same name element name. Is there a way to do this?

2

Hi there! I do something similar on my site. There are many resources for this in the forum, here are a few posts I found that will be helpful to you.
• https://www.wix.com/corvid/forum/community-discussion/no-unique-ids-for-buttons-in-one-repeater
• https://www.wix.com/corvid/forum/community-discussion/hovers-on-repeater-are-slow-sticky?origin=member_comments_page

This API will also be a good reference. Basically, you’ll need to use $item instead of $w for the elements. That way the event will be limited to each individual item in the database/repeater, instead of to the specific element ID.

Something like this:

$w.onReady(function () {
    $w("#yourHoverElement").onMouseIn((event) => {
 let $item = $w.at(event.context);
        $item("#yourBox").show();
    });
    $w("#yourHoverElement").onMouseOut((event) => {
 let $item = $w.at(event.context);
        $item("#yourBox").hide();
    });
})
3

Thanks, I understand the this a bit better, still not getting it to work. I used the code from one of the links above. I also tried the code pasted above changing the element names to match mine. Do you see anything in the screenshot that I might be doing wrong?

4

The code looks functional, but from the screenshot it looks like the box is not attached to the repeater, which would cause the code to not work.
“$item” only works with elements within a repeater.

5

OK thanks! I am having a hard time getting the box with text to stick to the repeater. It won’t attach.