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

Answer 2

这是一个干净的解决方案 - http://jsfiddle.net/u7NXf/5/

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

});

Answer 3

尝试将事件处理程序放在div左右img左右，就像我在此处所做的那样：http://jsfiddle.net/u7NXf/2/

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

Answer 4

你可能不需要为此使用JS，这里尝试这个CSS解决方案：

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

#test1trash {display:none;}

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

需要在另一个图像上显示可点击图像

4 个答案: