Javascript 附加项目应保持悬停状态，并在休假时离开

基本上，当有人将鼠标悬停在某个项目上时，应该会出现更多的项目（这是可行的），但当鼠标离开该项目时，项目会消失

但是，我希望“悬停区域”是包含附加项的整个div，以便用户可以浏览所有新的img

JavaScript

$("#mood").hover(
        function() {
            for (var i = 0; i < imgArr.length; i++) {
                var img = $('<img />');
                if (imgArr[i] != "") {
                    var img = $('<img />', {
                        src: '../img/mood/' + imgArr[i],
                        class: 'mood-item',
                        name: i
                    });
                    img.appendTo($('#mood-list'));
                }
            }
        },
        function() {
            $("#mood-list img:gt(0)").remove()
        }
    );

$（“#情绪”）。悬停(
函数（）{
对于（变量i=0；i

情绪
您将不得不使用两个不同的事件，因为您的条件是
\mood list
当
\mood
悬停时应填充div，而当
\mood list
不再有光标时应清空div

$("#mood").hover(
        function() {
            for (var i = 0; i < imgArr.length; i++) {
                var img = $('<img />');
                if (imgArr[i] != "") {
                    var img = $('<img />', {
                        src: '../img/mood/' + imgArr[i],
                        class: 'mood-item',
                        name: i
                    });
                    img.appendTo($('#mood-list'));
                }
            }
        }
    );

$('#mood-list').mouseleave(
        function() {
            $("#mood-list img:gt(0)").remove()
        });

与

var-anchor=$（''）；
附属物（锚）；
anchor.appendTo（$（“#情绪列表”）；
谢谢，现在可以了。但是，如果我将鼠标悬停在第一个元素上2次（这会导致其他元素出现），那么每个项目都会出现twice@user3549524，请查看我的更新答案，如果您仍然需要帮助，请告诉我。很酷的事情，我不知道。谢谢！您知道如果我想将此img放入一个应用程序，我必须更改什么吗？
$("#mood").hover(
        function() {
            for (var i = 0; i < imgArr.length; i++) {
                var img = $('<img />');
                if (imgArr[i] != "") {
                    var img = $('<img />', {
                        src: '../img/mood/' + imgArr[i],
                        class: 'mood-item',
                        name: i
                    });
                    img.appendTo($('#mood-list'));
                }
            }
        }
    );

$('#mood-list').mouseleave(
        function() {
            $("#mood-list img:gt(0)").remove()
        });

 $("#mood").hover(
            function() {
                if(!$(this).siblings().length){
                for (var i = 0; i < imgArr.length; i++) {
                    var img = $('<img />');
                    if (imgArr[i] != "") {
                        var img = $('<img />', {
                            src: '../img/mood/' + imgArr[i],
                            class: 'mood-item',
                            name: i
                        });
                        img.appendTo($('#mood-list'));
                    }
                }
                }
            }
        );

img.appendTo($('#mood-list'));

var anchor = $('<a></a>');
img.appendTo(anchor);
anchor.appendTo($('#mood-list'));