Php 动态添加带有动画定位的HTML

好的，这是一个相当乏味的问题

基本上，我有一个文件“thedot”。我的PHP脚本读取这个文件，并将其拆分为3个部分，称为点。然后，它以三行的形式将点渲染到页面上，用CSS格式化并填充文件中的内容

到目前为止还很容易。但是，这些点的动画效果很奇怪。它们通常是黑色的，你看不到它们的内容。当您将鼠标悬停在它们上方时，它们会展开，并更改颜色，以便您可以。 我的问题是，当我渲染它们时，将鼠标悬停在每个对象上会导致所有其他对象移动

我试过： a） 使用位置：固定在点上，并使用PHP为其指定特定位置。这不起作用，因为将鼠标悬停在它们上面会导致它们从左上角展开，而我需要它们从中间展开。 b） 为每行使用单独的表。这仍然把其余的推了下去。 c） 使用自动边距。这没有效果

在tuxnet.co.uk/dots/browse上的现场站点（看起来很可怕）

预期效果示例（只有一个，不是一列）：tuxnet.co.uk/dots/dot？dot=18668

干杯

弗雷迪

---

注意：当鼠标悬停在一行中的一个点上时，如果该行的其他两个成员水平移动（如单行示例中所示），则没有问题。

这并不完全符合您的要求，但鼠标悬停在点上不会移动其他行的点。你需要根据你的期望做更多的改变

<div><!-- first Row -->
<div class="dot one" style="margin: auto;">test</div> 
<div class="dot two" style="margin: auto;">test</div> 
<div class="dot three" style="margin: auto;">test</div>
</div>
<div><!-- second Row -->
<div class="dot one" style="margin: auto;">test</div> 
<div class="dot two" style="margin: auto;">test</div> 
<div class="dot three" style="margin: auto;">test</div>
</div>

试验
试验
测试
试验
试验
测试

我不确定这个答案是否有意义，但我会考虑一下

我会尝试在

标签上使用

position:relative

。然后在子点上使用

position:absolute

position:absolute

允许元素根据具有

position:absolute/relative

的下一个父元素来定位自己，或者如果它找不到任何该性质的父元素，则定位到

。因为您将使用

position:absolute

，所以您不应该遇到元素被其他元素“推送”的问题；但是，您可能会遇到一些重叠的问题（可以使用z-index轻松解决）

我希望这有帮助

编辑： 我摆弄了链接到演示页面的css文件。让我知道这是否是你要找的。所做的唯一更改是在

td

和

.dot

td {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  position:relative;
  height:70px;
  width:70px;
  margin:0;
  padding:0;
}
.dot {
    position:absolute;
    top:0;
    left:0;
    z-index:0;
  font-family: "courier new";
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  background-color: #000000;
  color: #000000;
  width: 70px;
  height: 70px;
  max-width: 70px;
  max-height: 70px;
  border-radius: 50%;
  overflow: hidden;
  -webkit-transition: all 0.3s;
     -moz-transition: all 0.3s;
          transition: all 0.3s;
}

.dot:hover {
  width: 140px;
  height: 140px;
  max-width: 140px;
  max-height: 140px;
  top:-35px;
  left:-35px;
  z-index:1;
}

.one:hover {
  background-color: #AA11FF;
}
.two:hover {
  background-color: #11AAFF;
}
.three:hover {
  background-color: #FFAA11;
}
.onedex {
  background-color: #AA11FF;
}
.twodex {
  background-color: #11AAFF;
}
.threedex {
  background-color: #FFAA11;
}

.footer {
font-size: 10;
font-family: 'courier new';
position: fixed;
bottom: 15px;
width: 100px;
left: 50%;
margin: 0 0 0 -50px;
text-align: center;
}

.header {
font-size: 30;
font-family: 'courier new';
position: fixed;
top: 25%;
width: 50%;
left: 50%;
margin: 0 0 0 -25%;
text-align: center;
}
.sharer {
font-size: 20;
font-family: 'courier new';
position: fixed;
bottom: 25%;
width: 50%;
left: 50%;
margin: 0 0 0 -25%;
text-align: center;
}

input[type=text] {
  width: 150px;
  height: 30px;
  border: none;
  font-family: "courier new";
  font-size: 20px;
  border-bottom: 1px solid #000;
  text-align: center;
  outline: none;
}

input[type=submit] {
  width: 100px;
  height: 30px;
  background-color: #FFFFFF;
  color: #000000;
  font-family: "courier new";
  font-size: 20px;
  border: 1px solid #000;
  text-align: center;
  outline: none;
}

input[type=submit]:hover {
  border: 1px solid #11AAFF;
  color: #11AAFF;
}

.dotstatic {
  font-family: "courier new";
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  color: #000000;
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

.error {
  height: 20px;
  font-size: 15px;
  font-family: "courier new";
  color: #E01B1B;
}

.divider {
  height: 1px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  margin-bottom: 10px;
  width: 150px;
  opacity: 0.7;
  background-color: grey;
}

---

每一行的高度都适合最高元素的大小，因此当圆扩大时，该行必须增加其高度，这会导致所有行移动。您是否尝试过增加行的高度以适应放大的圆，以便在圆扩大后行不需要扩大？@Freddy Tuxworth我不太确定，但您可能需要用DIV标记替换表，因为所有列（每行的TD）因为任何TD的内容都变得越来越大，所以正在扩展。请注意，IE版本9和更早版本不支持css转换。如果你试图使这个网页工作跨浏览器，你可能想考虑使用jQuery帮助悬停动画。对不起！我才意识到这个答案已经出现了。我去看看，太棒了！这真的很好用！现在，我只需要找出如何停止重叠，但一点保证金应该会起作用。干杯