如何相对于 div 弹出内容答案

【问题标题】：How to popup content in relative to a div如何相对于 div 弹出内容
【发布时间】：2018-08-20 13:48:01
【问题描述】：

我正在尝试制作多个 div 的网格。我想在任何其他 div 中弹出一些内容。但是这个弹出内容应该正好在悬停的 div 上。每个 div 都应该是动态的。

我找到了一个例子here。请帮我实现这样的系统。

【问题讨论】：

欢迎来到 StackOverflow。请记住，SO 是一个有一套规则的问答网站，而不是免费的编码服务。所以请使用stackoverflow.com/tour 并阅读stackoverflow.com/help/how-to-ask 并尽最大努力改进您的帖子（使用编辑按钮）。基本上，您应该展示您的一些尝试并询问您遇到的特定问题。最好的问候

标签： javascript html css wordpress

【解决方案1】：

您可以定位相对和绝对属性以将 div 覆盖在任何特定 div 上。

请注意父 div 应该是相对的，子/覆盖 div 应该是绝对的。

看看下面的例子。

*{box-sizing:border-box;}
.div{
  width:300px; 
  height:500px; 
  float:left; 
  margin:10px; 
  padding:10px; 
  position:relative; 
  color:#000;
  border:1px solid #ccc;
}
.div h1{ 
  margin:0; 
  padding:0; 
  font-size:17px;
}
.overlay-div{
  position:absolute; 
  top:0; 
  left:0; 
  padding:10px; 
  width:100%; 
  height:100%; 
  background:rgba(0,0,0,0.8); 
  color:#fff; 
  opacity:0; 
  visibility:hidden; 
   -webkit-transition:all 0.5s ease;
  -ms-transition:all 0.5s ease;
  -o-transition:all 0.5s ease;
  transition:all 0.5s ease;
}

.div:hover .overlay-div{
  opacity:1; 
  visibility:visible;
}

<html>
<head>
<title>overlay inside div</title>
</head>
<body>
  <div class="div">
    <h1>div content will be here</h1>
    <div class="overlay-div">Overlay Content will be here</div>
  </div>
  
   <div class="div">
    <h1>div content will be here</h1>
    <div class="overlay-div">Overlay Content will be here</div>
  </div>
  
   <div class="div">
    <h1>div content will be here</h1>
    <div class="overlay-div">Overlay Content will be here</div>
  </div>
  
   <div class="div">
    <h1>div content will be here</h1>
    <div class="overlay-div">Overlay Content will be here</div>
  </div>
</body>
</html>

【讨论】：

您好，非常感谢您的回复。实际上我想要的结构是 [link(gostream.site) 我不想覆盖在图像上。我想弹出另一个可能位于页脚下方的 div。请检查上述网站的来源。

【解决方案2】：

由于您没有指定您希望它如何发生，我建议您使用 jQuery UI。

您可以在此处找到一些使用工具提示的示例：jQuery UI Tooltip Example

如果您希望在每个其他元素上发生某些事情，您可能想看看 jQuery 的 :odd-Selector：jQuery :odd Selector Reference

您的网格可以使用 css-grid-propertys 创建。您可以在这里找到指南：grid-guide by CSS-Tricks

如果您有更具体的问题，您可能想以更具体的方式提出。

【讨论】：

是的，这很有帮助，但标题属性是有限的。我想弹出很多数据。当您将鼠标悬停在任何电影上时，请检查 [gostream.site]。你会得到一个显示一些信息的弹出窗口。我想做到这一点。
您可以在工具提示中使用任何 HTML。检查我提供的链接中的示例“自定义内容”。您可能还对从服务器动态检索数据感兴趣。那么这个问题对你来说可能很有趣：stackoverflow.com/questions/13175268/…