How can I continue to rotate a 2D UI Object using OnPointerEnter when object is on its side? (OnPointerExit is triggered)

Question

I have been wracking my brain on this for days. I'm trying to create a nice looking hand of cards, when the card is hovered over, it bobs up and down and rotates. This is triggered by OnPointerEnter, however, whenever it turns on its side and out of the mouses path OnPointerExit triggers, I've tried MANY things, including a bool that triggers the hover effect OnPointerEnter but it is just toggled off when it's turned on its side.

Is it possible to use the collider on my card with OnPointerEnter? Because that would probably solve my problem but haven't found anything on this.

Since the card is on UI, I have some placeholder code in there in order the have the inspected card render on top and return to its place.

    void Update()
{
    if (inspect)
    {

        transform.localScale = cardUpscale;

        posOffset = transform.position;

        transform.Rotate(new Vector3(0f, Time.deltaTime * degreesPerSecond, 0f), Space.World);

        // Float up/down with a Sin()
        tempPos = posOffset;
        tempPos.y += Mathf.Sin(Time.fixedTime * Mathf.PI * frequency) * amplitude;

        transform.position = tempPos;
    }
}

public void OnPointerEnter(PointerEventData eventData)
{
    zoomPlaceholder = new GameObject();
    zoomPlaceholder.name = "zoomPlaceholder";
    zoomPlaceholder.transform.SetParent(this.transform.parent); //binds the placeholder to the hand
    zoomPlaceholder.transform.SetSiblingIndex(this.transform.GetSiblingIndex());

    LayoutElement cardProxy1 = zoomPlaceholder.AddComponent<LayoutElement>();
    cardProxy1.preferredHeight = this.GetComponent<LayoutElement>().preferredHeight;
    cardProxy1.preferredWidth = this.GetComponent<LayoutElement>().preferredWidth;
    cardProxy1.flexibleHeight = 0;
    cardProxy1.flexibleWidth = 0;

    zoomPosition = transform.parent;
    transform.SetParent(transform.parent.parent);
    inspect = true;
}

public void OnPointerExit(PointerEventData eventData)
{
    inspect = false;

    this.transform.SetParent(zoomPosition);
    this.transform.SetSiblingIndex(zoomPlaceholder.transform.GetSiblingIndex());

    transform.localScale = cardNormalScale;

    Destroy(zoomPlaceholder);

}

Answer 1

Use a parent object that is the rectangle for the Handler for OnPointerEnter/Exit and put the card image as a child object.

Apply the transforms to the child object, not the object that handles the pointer enter/exit.