好吧，这是一个相当乏味的问题。
基本上，我有一个文件“thedot”。我的 PHP 脚本从该文件中读取并将其拆分为 3 个部分，称为点。然后，它将这些点以三行的形式呈现到页面上，使用 CSS 格式化并填充文件中的内容。
到目前为止很容易。但是，这些点是奇怪的动画。它们通常是黑色的，您看不到它们的内容。当您将鼠标悬停在它们上方时，它们会展开并改变颜色，以便您可以。 我的问题是，当我渲染它们时，将鼠标悬停在每一个上都会导致所有其他移动。
我试过: a) 在点上使用 position:fixed 并使用 PHP 为它们分配特定位置。这没有用，因为当我需要它们从中心展开时，将鼠标悬停在它们上方会导致它们从左上角展开。 b) 为每一行使用单独的表格。这仍然压低了其余部分。 c) 使用自动边距。这没有效果。
在 tuxnet.co.uk/dots/browse 上的实时站点(看起来很丑陋)
预期效果示例(只有一个，不是其中的一列):tuxnet.co.uk/dots/dot?dot=18668
干杯，
弗莱迪。
附言将鼠标悬停在一行中的一个点上时，如果该行的其他两个成员水平移动也没关系，如单行示例中所示。
最佳答案
我不确定这个答案是否有任何意义，但我会考虑一下。
我会尝试使用 position:relative在 <td> 上标签。然后使用 position:absolute在子点上。
position:absolute允许元素根据带有 position:absolute/relative 的下一个父元素定位自己或 <html>如果它找不到任何这种性质的 parent 。因为您将使用 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;
}
关于php - 动态添加带有动画定位的 HTML，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17531782/