jquery - 需要在另一张图片之上显示一张可点击的图片

Question

我有一个 jsFiddle我正在尝试做的事情。当我将鼠标悬停在主图像上时，我希望显示一个垃圾桶图像。这部分有效。我的问题是，当我将鼠标悬停在垃圾桶图像上时，它会在我将鼠标移到它上面时闪烁并消失。

我有以下 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>

还有 jQuery:

$(function() {
    $("#imagesContainer img:not([id$=trash])").hover(function () {
        $(this).next('#imagesContainer img[id$=trash]').show();
    }, function () {                   
        $('#imagesContainer img[id$=trash]').hide();
    });
});

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

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

Answer 1

看看这个 CSS 解决方案是否适合您

http://jsfiddle.net/u7NXf/4/

#test1:hover + #test1trash, #test1trash:hover{
    display: block;    
}
#test1trash{
    display: none;
}