鼠标悬停在其他 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 here

首先，你必须将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