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

对不起，这个问题的标题不是很清楚，但不确定如何描述它！在悬停时打开div，然后在div上悬停时保持div打开

基本上我遇到的问题是这样的。我正在制作培训课程的报名表格。有许多帮助图像，可以在悬停的情况下打开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的更改是在帮助图弹出时保持帮助图像可见，因为两者重叠。我不认为这与这个特定问题有关，但为了完整起见，我想包括它。

谢谢！

来源

2012-10-08 Chris

可能重复的http：//计算器.COM /问题/ 12691592/DIV-悬停心不是-working-properly/12691900＃12691900 – Salketer

尝试为鼠标悬停上的新div（“#pohelp”）添加另一个处理程序。（“#pohelp”）。hover（$（“＃pohelp”）。css（“display”，“block”）//类似的东西）; –

下面的代码可以解决你的问题：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-08 12:16:00 Anoop

这是我最后得出的正确答案的最接近答案。最终我使用了上述技术，但必须在一个范围内包含所有元素。然后我选择了.mouseleave函数的跨度。否则，在离开'helplink'后，帮助框消失，然后再次出现。 – Chris

见jQuery的HoverIntent Pluggin此

来源

2012-10-08 12:11:47

像这样

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

检查这个demo

来源

2012-10-08 12:14:49 Sibu

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

回答

相关问题