Question

对于这个问题的标题感到抱歉，它不是很清楚但不确定如何描述它！

基本上我遇到的问题是这个。我正在编写培训课程的报名表。有许多帮助图像可以在悬停时打开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"});
});

任何帮助都非常感激。

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

谢谢！

Answer 1

以下代码可以解决您的问题：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"});
});

Answer 2

请参阅jQuery HoverIntent Pluggin了解此内容

Answer 3

喜欢这个

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

检查此demo

在悬停时打开div，然后在div上方保持div打开

3 个答案: