在悬停时出现一个弹出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的前面？

回答

相关问题