在懸停時出現一個彈出div出現在其他div的前面？

http://www.thinkstudio.co.za/Untitled-1.html 在懸停時出現一個彈出div出現在其他div的前面？

所有在一個html文件中，使用css amd html。我曾嘗試使用z-index，它可以工作，但是當你將鼠標懸停在彈出框區域時，它會出現問題（請參閱上面的鏈接）這是否與div定位有關？我需要在容器區域內有2個div的內容，一旦你將鼠標懸停在它上面，就需要有一個彈出窗口，如果還有其他更簡單的方法，請幫助！

來源

2016-04-10 Jan-Hendrik Kruger

鏈接打破.... –

對不起，我固定的聯繫 –

歡迎堆棧溢出！尋求代碼幫助的問題必須包含在問題本身**中重現它所需的最短代碼**。雖然您提供了[**鏈接到網站或示例**]（http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work如果鏈接變得無效，那麼你的問題對於其他具有相同問題的未來SO用戶是沒有價值的。 –

我建議學習關於位置：相對和子元素的位置：絕對，並通過使用與風格z-index的div：1;和位置：絕對;你可以將你的div覆蓋在任何其他div上。

z-index決定div'堆棧'的順序。具有較高z-索引的div將出現在具有較低z-索引的div前面。請注意，此屬性僅適用於定位元素。

來源

2016-04-10 17:41:17 Kee

我有一個鏈接頂部，所有是在一個文件中，CSS也添加... http://www.thinkstudio.co.za/Untitled-1.html –

這是你在找什麼？ https://jsfiddle.net/53LyLmy9/

我所做的是創建一個JQuery事件，只要鼠標進入彈出框或框，彈出窗口會顯示，當鼠標離開時，它將隱藏。

$('#box,#popup').mouseenter(function(){ 
    $('#popup').show(); 
}); 
$('#box,#popup').mouseleave(function(){ 
    $('#popup').hide(); 
});

來源

2016-04-10 17:45:44 k97513

非常感謝你，這也是非常有用！我會嘗試解決您的問題。 –

沒問題。這應該普遍工作，只要你有JQuery鏈接。 – k97513

問題是當你懸停.box它鬆動懸停在鏈接是憤怒.box顯示。修正你的問題是這樣

.box:hover { 
    display:block; 
    }

來源

2016-04-10 17:46:39 Vlad

你試過了嗎？ – k97513

是的，只需打開開發人員工具並添加此代碼，一切工作在我的鉻。它不適用於您的瀏覽器？我認爲應該 – Vlad

是的，但是當你移動鼠標時，它不會隱藏彈出窗口。 – k97513

問題是，當你徘徊.box的它在鏈接這是trigering .box的顯示寬鬆懸停。試試這個小提琴：https://jsfiddle.net/Jyde/2sodLq6y/

.box { 
    display: none; 
    position: absolute; 
    background: #215273; 
    width: 200px; 
    height: 100px; 
    float: left; 
    color: white; 
    margin-top: -30px; 
    margin-right: 0px; 
    margin-bottom: 0px; 
    margin-left: 90px; 
    text-align: center; 
    z-index:1; 
} 

.topdiv{ 
    height:250px; 
    width:250px; 
} 

.container{ 
    width:400px; 
    height:600px; 
    background-color:white; 
    color:white; 
    /*Important:*/ 
    position:absolute; 
    z-index: 10; 
} 

.left{ 
    width:200px; 
    height:300px; 
    background-color:#bda97f; 
    float:left; 
    position:absolute; 
} 

.link-spanner{ 
    position:absolute; 
    width:100%; 
    height:100%; 
    top:0; 
    left: 0; 
    z-index: 1; 
} 

a:hover + .box { 
    display:block; 
} 

.box:hover { 
    display:block; 
}

來源

2016-04-10 18:11:35 Jyd

非常感謝，像炸彈一樣工作 –

在懸停時出現一個彈出div出現在其他div的前面？

回答

相關問題