使悬停时的弹出 div 出现在其他 div 的前面？答案

【问题标题】：Make a popup div on hover appear in front of other divs?使悬停时的弹出 div 出现在其他 div 的前面？
【发布时间】：2016-04-10 17:29:34
【问题描述】：

http://www.thinkstudio.co.za/Untitled-1.html

所有内容都在一个 html 文件中，使用 css amd html。我尝试过使用 z-index，它可以工作，但是当您将鼠标悬停在弹出框区域上时，它会出现问题（请参阅上面的链接）这与 div 定位有关吗？我需要 2 个 div 内容在容器区域内，一旦你将鼠标悬停在它上面，需要有一个弹出窗口，如果有其他更简单的方法，请帮助！

【问题讨论】：

对不起，我修复了链接
欢迎来到 Stack Overflow！寻求代码帮助的问题必须包含在问题本身中重现它所需的最短代码。虽然您提供了link to a site or an example，但如果链接失效，您的问题对于未来遇到相同问题的其他 SO 用户将毫无价值。
您好，谢谢，下次我将使用提供的指南，链接将保持不变。

标签： html css

【解决方案1】：

这就是你要找的吗？ https://jsfiddle.net/53LyLmy9/

我所做的是创建一个 JQuery 事件，每当鼠标进入弹出窗口或框时，弹出窗口就会显示，而当鼠标离开时，它会隐藏。

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

【讨论】：

非常感谢，这也很有用！我将尝试使用您的解决方案。
没问题。只要您链接了 JQuery，这应该普遍适用。

【解决方案2】：

问题是当您悬停 .box 时，它会在触发 .box 显示的链接上松动悬停。像这样解决了你的问题

   .box:hover {
     display:block;
    }

【讨论】：

是的，刚刚打开开发者工具并添加了这段代码，对我来说一切都在 chrome 中运行。它在您的浏览器中不起作用？我觉得应该
是的，但是当您将鼠标移出时，它不会隐藏弹出窗口。
可以，只要把它移出触发区域plnkr.co/edit/XfQ2irlkQ9xW10e2C4aj?p=preview
谢谢你！这解决了我的问题！我将在其他浏览器中对此进行测试，它可以在 firefox 和 safari 上运行。
不，它没有。将鼠标悬停在距离框右侧约 100 像素处。

【解决方案3】：

我建议学习 position:relative 和 position: absolute 的子元素，以及使用样式为 z-index:1; 的 div和位置：绝对；您可以将您的 div 覆盖在任何其他 div 上。

z-index 决定了 div 'stack' 的顺序。 z-index 较高的 div 会出现在 z-index 较低的 div 前面。请注意，此属性仅适用于定位元素。

【讨论】：

我有一个顶部的链接，都在一个文件中，css也添加了...thinkstudio.co.za/Untitled-1.html

【解决方案4】：

问题是当您悬停 .box 时，它会在触发 .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;
}

【讨论】：