1

对不起这个问题的标题，它不是很清楚，但不知道如何描述它！

基本上我遇到的问题就是这个。我正在制作培训课程的报名表。有许多帮助图像可以在悬停时打开一个带有附加信息的 div。如果您将鼠标悬停在 div 本身上，我需要的是帮助框保持打开状态。目前，当您离开帮助图像时，div 会关闭，这使得无法单击框中的任何链接。我希望 div 在悬停在帮助图像或 div 上时保持打开状态，但在您移到页面的另一部分时关闭。

HTML在这里：

<a href="#" id="pohelplink" class="helplinks">
 <img src="images/help.png" class="helpimage" id="pohelpimage" />
</a>
<div class="helpbox" id="pohelp">
 <h4>Purchase Order</h4>
 <p>If your company requires purchase orders to be raised, we'll need to know the PO Number so we can include it on our invoice. Please type the number into this box.</p>
 <p>If your organisation doesn't use purchase orders then you can simply leave this area blank.</p>
</div>

和jQuery：

$("#pohelplink").hover(function(){
 $("#pohelplink").css({"z-index":"1110"});
 $("#pohelp").fadeIn();
 },
function(){
 $("#pohelp").fadeOut();
 $("#pohelplink").css({"z-index":"1095"});
});

非常感谢任何帮助。

PS 对 z-index 的更改是为了在帮助 div 弹出时保持帮助图像可见，因为两者重叠。我认为它与这个特定问题无关，但为了完整起见，我想将其包括在内。

谢谢！

4

3 回答 3

4

以下代码可能会解决您的问题：jsfiddle

    $("#pohelplink, #pohelp").mouseenter(function () {// show pohelp 
        $("#pohelplink").css({
            "z-index": "1110"
        });
        $("#pohelp").fadeIn();
    });
 $("#pohelp").mouseleave(function(){ // show pohelp tile mouseleave from pohelp
       $("#pohelp").fadeOut();
      $("#pohelplink").css({"z-index":"1095"});
});​
于 2012-10-08T12:16:00.743 回答
1

请参阅jQuery HoverIntent 插件

于 2012-10-08T12:11:47.187 回答
0

像这样

  $("#pohelplink,#pohelp").hover(function(){
     $("#pohelplink").css({"z-index":"1110"});
     $("#pohelp").fadeIn();
     },
    function(){
     $("#pohelp").fadeOut();
     $("#pohelplink").css({"z-index":"1095"});
    });​

检查这个演示

于 2012-10-08T12:14:49.760 回答