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>

我希望在centerFolio上显示id为centerFolio2的按钮：悬停并可用于单击。所有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

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

1 个答案: