User 13204940 Ответов: 0

Mouseenter/mouseleave застревает

Привет

Вот моя структура:

<родительский элемент>
- - <дочерний элемент>
- - - - <дочернее наложение>
- - - - <другие вещи>
- - <дочерний элемент>
- - - - <дочернее наложение>
- - - - <другие вещи>

Как это должно работать:
Изображение 1[^]

Проблема если я быстро наведу курсор мыши на несколько дочерних элементов:
Изображение 2[^]

Если я быстро наведу курсор мыши на несколько дочерних элементов, они останутся так, как будто мышь парит, хотя они должны делать это только в том случае, если мышь находится на элементе, и вернутся в свое нормальное состояние, когда мышь покинет дочерний элемент.

Когда "содержимое" наведении курсора, на 'наложения' становится 'дисплей: блок'. Вот почему mouseleave предназначен для наложения вместо этого.

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);
                }
        });


Что я уже пробовал:

Mouseenter, Mousemove, Mouseleave, Mouseout

0 Ответов