Question

好的，这是一个非常繁琐的。

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

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

我试过了： a）使用位置：固定在点上并使用PHP为它们指定特定位置。这不起作用，因为当我需要它们从中心扩展时，将它们悬停在它们之上使它们从左上角扩展。 b）为每行使用单独的表。这仍然推动了其余部分。 c）使用自动边距。这没有效果。

在tuxnet.co.uk/dots/browse

现场（看起来很可怕）

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

干杯，

弗雷迪。

P.S。将鼠标悬停在一行中的某个点上时，如果该行的其他两个成员水平移动，就像在单行示例中一样。

Answer 1

根据您的要求，这并不完全有效，但悬停在Dot上不会移动其他行的点。您需要根据自己的期望进行更多更改。

<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>

Answer 2

我不确定这个答案是否有意义，但我会采取行动。

我会尝试在position:relative标签上使用<td>。然后在子点上使用position:absolute。

position:absolute允许元素根据下一个带有position:absolute/relative的父元素定位自己，或者如果它找不到任何具有该性质的父元素，则定位到<html>。因为您将使用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;
}

使用动画定位动态添加HTML

2 个答案: