Mouse Enter/Leave events still fire, even though the frames that are handling them are not visible

I have ran into an issue with my user interface while making prompts for my shop UI, I have tried to do something like setting the prompt frames active property to true but the problem with that is that upon hovering the mouse icon changes to a hovering icon, which is quite annoying. I am quite not sure what is the problem or if this is a roblox bug, is there any way for me to fix this? Here is a video showing the issue

When a prompt or other overlaying UI appears, disconnect the connections and reconnect them when the prompt is closed.

If the items in the grid in your UI are cloned using scripts, you could do something like this:

local hoverItems = {}
local connections = {} 

local function DisconnectItems() -- Call this function when a prompt shows
    for _, con in connections do
        con:Disconnect()
    end
    table.clear(connections)
end

local function ConnectItems() -- Call this function when the prompt disappears
    for _, item in hoverItems do
        table.insert(connections, item.MouseEnter:Connect(function()
              -- your code
        end)) 

        table.insert(connections, item.MouseLeave:Connect(function()
              -- your code
        end)) 
    end
end

--// your code (maybe)
for _, data in someData do
    local item = Template:Clone()
    ...
    item.Parent = frame

    table.insert(hoverItems, item) -- insert each item into this table
end 

make a debounce

local debounce = true

connectionhere:Connect(function()
if debounce then return end

end)


Creating and removing new connections each time is super inefficient and will OOF code’s structure entirely.
Making debounce would be a more viable option.

My idea of UI efficiency is that connections connect and disconnect per page, meaning there are no memory leaks. Debounce works, but isn’t a solves-all-problems solution. For smaller games/beginners, it doesn’t really matter, OP will decide.