Jquery 需要在另一个图像上显示可单击的图像

我对我要做的事有一个清晰的认识。当我将鼠标悬停在主图像上时，我希望显示一个垃圾桶图像。这部分是有效的。我的问题是，当我把鼠标悬停在垃圾桶图像上时，它就像闪烁一样，当我把鼠标移到上面时，它就消失了

我有以下html：

<div id="imagesContainer">
    <div style="position: relative; left:0;top:0">
        <img id="test1" src="http://upload.wikimedia.org/wikipedia/commons/2/26/YellowLabradorLooking_new.jpg" style="width: 60px; height: 60px; position: relative; top:0; left:0" />
        <img id="test1trash" src="http://www.nonamescriptware.com/wp-content/uploads/trashcan.png" style="width: 32px; height: 32px; position: absolute; top: 28px; left: 32px; cursor: pointer; display: none" />
</div>
</div>

我想我能理解正在发生的事情。我想当我在垃圾桶上方悬停时，主图像接收到一个鼠标移出事件，它隐藏了垃圾桶。然后，当鼠标移动时，由于垃圾桶不见了，主图像接收到事件中的鼠标，然后显示垃圾桶

---

我的问题是如何解决这个问题？

看看这个CSS解决方案是否能帮到你

---

看看这个CSS解决方案是否能为您带来好处

---

尝试将事件处理程序放在两个img周围的div上，就像我在这里做的那样：

---

悬停事件将从img的内部元素冒泡到div的外部元素。因此，即使垃圾桶悬停，悬停事件也会触发。

尝试将事件处理程序放在两个img周围的div上，就像我在这里做的那样：

---

悬停事件将从img的内部元件到div的外部元件冒泡。因此，即使垃圾桶悬停，悬停事件也会触发。

这里有一个干净的解决方案-

---

这是一个干净的解决方案-

---

您可能不需要为此使用JS，请尝试以下CSS解决方案：

CSS从test1trash中删除内联显示样式：

#test1trash {display:none;}

#imagesContainer:hover #test1trash { display:block;}

---

您可能不需要为此使用JS，请尝试以下CSS解决方案：

CSS从test1trash中删除内联显示样式：

#test1trash {display:none;}

#imagesContainer:hover #test1trash { display:block;}

---

您是否尝试使用mousenter和mouseleave事件而不是悬停，我自己似乎记得这个问题，对这是一个解决方案有模糊的记忆您是否尝试使用mousenter和mouseleave事件而不是悬停，我自己似乎记得这个问题，对这是一个仅用于CSS的解决方案+1有模糊的记忆。如果imagesContainer中有多个div，您可以将代码更新为我喜欢的解决方案。唯一的问题是我的图像是动态放置的，所以我不会事先知道ID名称来进行CSS样式设计。你应该查看@kei的注释中的fiddle，他/她的解决方案使用类而不是ID。这将允许您使用动态图像。+1仅用于CSS。如果imagesContainer中有多个div，您可以将代码更新为我喜欢的解决方案。唯一的问题是我的图像是动态放置的，所以我不会事先知道ID名称来进行CSS样式设计。你应该查看@kei的注释中的fiddle，他/她的解决方案使用类而不是ID。这将允许您使用动态图像。这似乎工作得很好，但当我将鼠标从图像上滑下时，右侧的垃圾桶图像仍然存在。但如果我把鼠标向下移动，它似乎可以工作。这是因为imageContainer是浏览器的全宽。如果将容器更改为图像的宽度，问题就会消失。这似乎效果不错，但当我将鼠标从图像上滑下时，右侧的垃圾桶图像仍然存在。但如果我把鼠标向下移动，它似乎可以工作。这是因为imageContainer是浏览器的全宽。如果将容器更改为图像的宽度，问题就会消失。很好，除了图像被动态放置在那里，所以我不会事先知道id。即使它被动态放置，您也应该能够从模板代码中设置类或id。很好，除了图像被动态放置在那里，所以我不会事先知道id。即使它是动态放置的，您也应该能够从模板代码中设置类或id。

 $(function() {
    $("#imagesContainer img").mouseenter(function () {
                    $(this).next('#imagesContainer img[id$=trash]').show();
                });
    $("#imagesContainer").mouseleave(function (){                   
                    $('#imagesContainer img[id$=trash]').hide();
                });

});

#test1trash {display:none;}

#imagesContainer:hover #test1trash { display:block;}