鼠标悬停在其他div上显示的隐藏按钮

Question

我有一个带有5个图像按钮的标题

<div id="header">
<a href="#" onClick="goto('#Omeni', this); return false"><div id="centeredOmeni"></div></a>
<a href="#" onClick="goto('#folio', this); return false"><div id="centeredFolio"></div></a>
<a href="#" onClick="goto('#folio2', this); return false"><div id="centeredFolio2"></div></a>
<a href="#" onClick="goto('#stor', this); return false"><div id="centeredStor"></div></a>
<a href="#" onClick="goto('#kont', this); return false"><div id="centeredKont"></div></a>
</div>

我希望ID为centeredFolio2的按钮显示在centeredFolio：hover上并可以单击的位置。 所有5个按钮在CSS上的悬停都有不同的背景图像，我想保持不变。 我对CSS或jQuery的解决方案都很好，我可以找到一个在href内的div这样的工作解决方案。 该按钮要么不显示，要么从不隐藏。

这是没有效果的jsFiddle http://jsfiddle.net/nqmf7/

谢谢。

Answer 1

这是使用jQuery的mouseover()方法为您服务的解决方案：

jsFiddle在这里

首先，必须添加display:none; 到div #centeredFolio2的CSS：

display:none;

接下来，您可以使用以下jQuery：

$(document).ready(function() {

    $('#centeredFolio').mouseover(function() {
        $('#centeredFolio2').show();
    });
    $('[id^=centered]').not('#centeredFolio, #centeredFolio2').mouseover(function() {
        $('#centeredFolio2').hide();
    });
    $('#centeredFolio2').click(function() {
        $(this).hide();
        alert('You clicked the button');
    });

}); //END document.ready