Question

基本上当某人悬停在某个特定项目上时，会出现更多项目（可行），但当鼠标离开该项目时，项目会消失。

但是我希望“悬停区域”成为包含附加项目的整个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()
        }
    );

HTML

<div class="form-group">
     <label class="col-md-3 col-sm-4 control-label">Mood</label>
      <div class="col-md-9 col-sm-8" id="mood-list">
             <img src="...." id="mood"/>
      </div>
</div>

Answer 1

你必须使用两个不同的事件，因为你的条件是#mood-list div应当在#mood悬停时填充但是当#mood-list不再有光标时应该清空

$("#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()
        });

<强>更新

如果我在第一个元素上悬停2次（导致其他元素）出现），每个项目出现两次

在您的情况下，您可以检查像

这样的兄弟姐妹

 $("#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放进去，你知道我要改变什么？

替换

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

与

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

附加物品应保持悬停并离开

1 个答案: