Question

我有一个可重复的图块生成器。所以我用for循环生成HTML。当我将鼠标悬停在其上时，我需要将其淡出，然后将另一个div放置在同一位置。我尝试为每个可重复的图块使用position: relative ..然后放置一个隐藏的div，使它显示在悬停时，使用position: absolute ..但是，子div放置在相同的位置第一个图块，它们没有按照其父对象放置。

以下是我所模仿的代码：

.titleContainer:hover{
    opacity: 0;
}

.headers{
    opacity: 0;
}
.headers:hover{
    opacity: 1;
}

<div data-reactroot="" class="">
  <div class="tile" style="position: relative;">
    <div class="titleContainer" style="position: relative; float: left; width: 25%; margin-right: 30px;">
    <img src="https://cdn.pixabay.com/photo/2018/08/31/19/16/fan-3645379_960_720.jpg" style="width: 100%; height: 200px;">
      <div class="" style="background-color: red; opacity: 0.8; position: absolute; top: 0px; width: 100%; height: 40px;">
        <h3 style="color: white; text-align: center; line-height: 0.5;">Random Tile</h3>
      </div>
    </div>
    <div class="headers" style="background-color: red; position: absolute; width: 25%; height: 200px;">Hello</div>
  </div>
  <div class="tile" style="position: relative;">
    <div class="titleContainer" style="position: relative; float: left; width: 25%; margin-right: 30px;">
    <img src="https://cdn.pixabay.com/photo/2014/05/02/21/47/workstation-336369_960_720.jpg" style="width: 100%; height: 200px;">
      <div class="" style="background-color: red; opacity: 0.8; position: absolute; top: 0px; width: 100%; height: 40px;">
        <h3 style="color: white; text-align: center; line-height: 0.5;">Quick Links</h3>
      </div>
    </div>
    <div class="headers" style="background-color: red; position: absolute; width: 25%; height: 200px;">Hello</div>
  </div>
  <div class="tile" style="position: relative;">
    <div class="titleContainer" style="position: relative; float: left; width: 25%; margin-right: 30px;">
    <img src="https://cdn.pixabay.com/photo/2015/01/14/18/41/home-office-599475_960_720.jpg" style="width: 100%; height: 200px;">
      <div class="" style="background-color: red; opacity: 0.8; position: absolute; top: 0px; width: 100%; height: 40px;">
        <h3 style="color: white; text-align: center; line-height: 0.5;">Global Links</h3>
      </div>
    </div>
    <div class="headers" style="background-color: red; position: absolute; width: 25%; height: 200px;">Hello</div>
  </div>
</div>

如您所见，将鼠标悬停在第一个图块上只会显示所有内部div彼此重叠放置，而其他图块在悬停时将不具有此行为。

父div为相对，子div为绝对，但仍无法正常工作

0 个答案: