0

好吧，这是一个相当乏味的。

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

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

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

tuxnet.co.uk/dots/browse 上的实时站点（看起来很可怕）

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

干杯，

弗雷迪。

PS 当悬停在一行中的一个点上时，如果该行的其他两个成员水平移动，就像在单行示例中一样。

4

2 回答 2

0

这不能完全按照您的要求工作，但悬停在 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>
于 2013-07-08T17:43:22.303 回答
0

我不确定这个答案是否有意义，但我会尝试一下。

我会尝试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;
}
于 2013-07-08T17:43:27.993 回答