react-bootstrap 卡在悬停时保持打开状态

如何解决react-bootstrap 卡在悬停时保持打开状态

当我将鼠标悬停在用户的图标/用户名上时，我想弹出打开一个用户个人资料卡片。我已经弄清楚了那部分，但是我希望当我将鼠标悬停在卡片上时卡片本身保持打开状态（当鼠标悬停在用户名上是我想要的目标时，类似于 instagram 网络的工作方式）。这可以使用 react-bootstrap OverlayTrigger 和 Popover 吗？还是我需要不同的引导程序组件？ UserCard 组件内部是否应该有自己的覆盖层？我希望这是足够的信息，请指教，谢谢！！！

<ListGroup className="search-users-list-group search-scrollable">
    {userDetails.filter(F => F.userHandle.toLowerCase().includes(searchTerm.toLowerCase()))?.map((item,key) => {
        return (
            <div key={key}>
                {item.userId !== user.userId &&
                    <ListGroup.Item className="search-users-list-item">
                        <OverlayTrigger
                            trigger={['hover','focus']}
                            placement="auto"
                            delay={{ show: 1000,hide: 1000 }}
                            overlay={
                                <Popover>
                                    <UserCard
                                        cardUserId={item.userId}
                                        loggedInUserId={user.userId}
                                        action={followUnfollow}
                                    />
                                </Popover>
                            }>
                            <a href={item.userId !== user.userId ? "/profile/" + item?.userId : "/profile"}
                                onClick={() => {
                                    setSearchTerm('');
                                    setUserDetails([]);
                                }}>
                                <Image roundedCircle thumbnail className="circle search-users-avatar"
                                    src={item?.avatar || blankAvatar}
                                    alt={item.userHandle}
                                />
                                {'  '}
                                {item?.userHandle}
                            </a>
                        </OverlayTrigger>
                        {item.followers?.includes(user.userId)
                            ? <Button
                                variant="outline-primary"
                                className="search-users-follow-btn"
                                onClick={() => {
                                    followUnfollow('/users/unfollow',item.userId)
                                }}>Unfollow</Button>
                            : <Button
                                variant="outline-primary"
                                className="search-users-follow-btn"
                                onClick={() => {
                                    followUnfollow('/users/follow',item.userId)
                                }}>Follow</Button>
                        }
                    </ListGroup.Item>
                }
            </div>
        )
    })
    }
</ListGroup>