Mouseenter/mouseleave getting stuck

See more:

CSS

HTML

Hi

Here's my structure:

<parent element>
- - <child element>
- - - - <child overlay>
- - - - <other stuff>
- - <child element>
- - - - <child overlay>
- - - - <other stuff>

How it should work:
Image 1[^]

The issue if I move the mouse quickly over several child elements:
Image 2[^]

If I quickly move my mouse over multiple child elements, they stay as if the mouse is hovering, when they should only do that if the mouse is on the element and return to their normal state when the mouse leaves the child element.

When the 'content' is moused over, the 'overlay' becomes 'display: block'. This is why mouseleave is for the overlay instead.

JS:

$(document).on("mouseover", ".service_message_content", function(e)
        {
                e.stopPropagation();

                var parentID = "#" + $(this).parent().prop("id");

                var cls = $(parentID + " > .service_message_bar").attr("class").split(" ")[1];
                var c = cls.substring(20);

                switch(c)
                {
                        case "red":
                                c = "25,12,12";
                                break;
                        case "orange":
                                c = "25,17,0";
                                break;
                        case "green":
                                c = "12,25,12";
                                break;
                        case "blue":
                                c = "15,15,25";
                                break;
                        case "light_blue":
                                c = "0,22,25";
                                break;
                }

                $(parentID + " > .service_message_overlay").css({"display": "grid", "background": "rgba(" + c + ", 0.8)"});
                $(parentID + " > .service_message_overlay").stop().animate({"opacity": "1"}, 500);
                $(parentID + " > .service_message_triangle").stop().animate({"border-right-color": "rgba(" + c + ", 1)"}, 500);
        });

        $(document).on("mouseleave", ".service_message_overlay", function()
        {
                for(var i = 0; i < window.messages.length; i++)
                {
                        var parentID = "#message" + i;

                        $(parentID + " > .service_message_overlay").stop().animate({"opacity": "0"}, 500, function()
                        {
                                $(this).css("display", "none");
                        });

                        $(parentID + " > .service_message_triangle").stop().animate({"border-right-color": "rgb(43,43,43)"}, 500);
                }
        });

What I have tried:

Mouseenter, Mousemove, Mouseleave, Mouseout