2012-10-08 217 views
1

對不起,這個問題的標題不是很清楚,但不確定如何描述它!在懸停時打開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的更改是在幫助圖彈出時保持幫助圖像可見,因爲兩者重疊。我不認爲這與這個特定問題有關,但爲了完整起見,我想包括它。

謝謝!

+0

可能重複的http://計算器.COM /問題/ 12691592/DIV-懸停心不是-working-properly/12691900#12691900 – Salketer

+0

嘗試爲鼠標懸停上的新div(「#pohelp」)添加另一個處理程序。 (「#pohelp」)。hover($(「#pohelp」)。css(「display」,「block」)//類似的東西); –

回答

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"}); 
});​ 
+0

這是我最後得出的正確答案的最接近答案。最終我使用了上述技術,但必須在一個範圍內包含所有元素。然後我選擇了.mouseleave函數的跨度。否則,在離開'helplink'後,幫助框消失,然後再次出現。 – Chris

0

像這樣

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

檢查這個demo