Question

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

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

Answer 1

由于您未指定期望的方式，因此建议您使用jQuery UI。

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

如果您希望其他所有元素都发生某些事情，则可能需要查看jQuery的:odd-选择器：jQuery :odd Selector Reference

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

如果您有更具体的问题，则可能希望以更具体的方式提问。

Answer 2

您可以定位相对属性和绝对属性以将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>

如何相对于div弹出内容

2 个答案: