1

我有一个带有 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/

谢谢你。

4

1 回答 1

1

这是一个可能对您有用的解决方案，使用 jQuery 的mouseover()方法：

jsFiddle here

首先，您必须display:none;为 div 添加到 css 中#centeredFolio2：

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
于 2013-09-18T18:31:18.240 回答