悬停时元素脱离容器

Question

我有一个垂直排列的元素列表，它显示某些数据，如图像、标题和描述。我在容器内有一个名为 .dynamicDataHoverHighlight 的 div，显示设置为 none。我想做的是，当我将鼠标悬停在一个包含所有数据的特定容器上时，我希望 div 具有显示弹性，但每当我悬停显示 div 时，它就会工作并且可见，但另一个parent 容器上的数据将从我分配给它们的容器中取出，并与下一个容器对齐。为了更好地理解我的问题，如果您将鼠标悬停在容器列表中的第一个容器上，您将看到 IMG，它旁边的数据将从该容器中移出并移动到它们下面的一个。我该如何解决这个问题并让它们留在他们的特定容器中？请注意，显示 div 的悬停仅在悬停在第一个容器上时有效，而第三个容器除了更改其背景颜色外不会执行任何操作。

.shelf2 {
  position: absolute;
  top: 14%;
  left: 0%;
  width: 100%;
}

.shelf2 .dynamicShelf2Items {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  position: relative;
  margin-top: 4%;
  left: 18%;
  width: 64%;
}

.shelf2 .dynamicShelf2Items .dynamicData {
  width: 100%;
  height: 13em;
  border-bottom: 1px solid #9b9999;
  cursor: pointer;
}

.shelf2 .dynamicShelf2Items .dynamicData:hover {
  background-color: #f2f0f0;
}

.shelf2 .dynamicShelf2Items .dynamicData .dynamicDataHoverHighlight {
  display: none;
  position: relative;
  top: 0%;
  left: 0%;
  width: 1.2%;
  height: 13em;
  background-color: rgb(3, 149, 3);
}

.shelf2 .dynamicShelf2Items .dynamicData:hover>.dynamicDataHoverHighlight {
  display: flex;
}

.shelf2 .dynamicShelf2Items .dynamicData .imgCon {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  top: 0%;
  left: 1.5%;
  width: 30%;
  height: 100%;
}

.shelf2 .dynamicShelf2Items .dynamicData img {
  position: absolute;
  top: 10%;
  left: 5%;
  width: 90%;
  height: 80%;
}

.shelf2 .dynamicShelf2Items .dynamicData .detailsCon {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  top: -100%;
  left: 32%;
  width: 62%;
  height: 100%;
}

.shelf2 .dynamicShelf2Items .dynamicData .detailsCon .level1 {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 10%;
  left: 0%;
  width: 100%;
  height: 15%;
}

.shelf2 .dynamicShelf2Items .dynamicData .detailsCon .level1 p {
  position: absolute;
  left: 0%;
  font-size: 1.3vw;
  font-weight: 500;
  font-family: 'Roboto', sans-serif;
  margin-top: auto;
  margin-bottom: auto;
}

.shelf2 .dynamicShelf2Items .dynamicData .detailsCon .level2 {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 30%;
  left: 0%;
  width: 100%;
  height: 15%;
}

.shelf2 .dynamicShelf2Items .dynamicData .detailsCon .level2 p {
  position: absolute;
  left: 0%;
  font-size: 1.1vw;
  font-weight: 400;
  font-family: 'Roboto', sans-serif;
  margin-top: auto;
  margin-bottom: auto;
}

.shelf2 .dynamicShelf2Items .dynamicData .detailsCon .level3 {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 25%;
  left: 0%;
  width: 100%;
  height: 30%;
}

.shelf2 .dynamicShelf2Items .dynamicData .detailsCon .level3 p {
  position: absolute;
  left: 0%;
  font-size: 1.5vw;
  font-weight: 700;
  font-family: 'Roboto', sans-serif;
  margin-top: auto;
  margin-bottom: auto;
}

.shelf2 .dynamicShelf2Items .dynamicData .detailsCon .level4 {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 10%;
  left: 0%;
  width: 100%;
  height: 15%;
}

.shelf2 .dynamicShelf2Items .dynamicData .detailsCon .level4 p {
  position: absolute;
  left: 0%;
  font-size: 1.1vw;
  font-weight: 400;
  font-family: 'Roboto', sans-serif;
  margin-top: auto;
  margin-bottom: auto;
}

<div class="shelf2">
  <div class="dynamicShelf2Items">
    <div class="dynamicData">
      <div class="dynamicDataHoverHighlight">
      </div>
      <div class="imgCon">
        <img src="https://support.apple.com/library/APPLE/APPLECARE_ALLGEOS/SP790/Screen%20Shot%202019-03-19%20at%201_32_36%20PM.png" />
      </div>
      <div class="detailsCon">
        <div class="level1">
          <p>iMac 27-inches (2019) Retina 5K (4GB Graphics) in mint condition</p>
        </div>
        <div class="level2">
          <p>Apple · Mac · Grey</p>
        </div>
        <div class="level3">
          <p>US ,999</p>
        </div>
        <div class="level4">
          <p>Used Once | Excellent Condition</p>
        </div>
      </div>
    </div>
    <div class="dynamicData">
      <div class="imgCon">
        <img src="https://encrypted-tbn3.gstatic.com/shopping?q=tbn:ANd9GcSnkX1cceCzhok-fA2D5ShdGYEin2Br5zWnE_9lyssPXg_458B0ks7xhNaiVSjf9aVGhycCKlFVYxSR2wVzfGwRnso0fQwOXtKcK4fWXbw&usqp=CAE" />
      </div>
      <div class="detailsCon">
        <div class="level1">
          <p>Modern U shaped Luxury Sofa</p>
        </div>
        <div class="level2">
          <p>Tufted · Leather · Wood</p>
        </div>
        <div class="level3">
          <p>US ,700</p>
        </div>
        <div class="level4">
          <p>Used Once | Excellent Condition</p>
        </div>
      </div>
    </div>
    <div class="dynamicData">
      <div class="dynamicDataHoverHighlight">
      </div>
      <div class="imgCon">
        <img src="https://encrypted-tbn3.gstatic.com/shopping?q=tbn:ANd9GcSnkX1cceCzhok-fA2D5ShdGYEin2Br5zWnE_9lyssPXg_458B0ks7xhNaiVSjf9aVGhycCKlFVYxSR2wVzfGwRnso0fQwOXtKcK4fWXbw&usqp=CAE" />
      </div>
      <div class="detailsCon">
        <div class="level1">
          <p>Modern U shaped Luxury Sofa</p>
        </div>
        <div class="level2">
          <p>Tufted · Leather · Wood</p>
        </div>
        <div class="level3">
          <p>US ,700</p>
        </div>
        <div class="level4">
          <p>Used Once | Excellent Condition</p>
        </div>
      </div>
    </div>
    <div class="dynamicData">
      <div class="imgCon">
        <img src="https://encrypted-tbn3.gstatic.com/shopping?q=tbn:ANd9GcSnkX1cceCzhok-fA2D5ShdGYEin2Br5zWnE_9lyssPXg_458B0ks7xhNaiVSjf9aVGhycCKlFVYxSR2wVzfGwRnso0fQwOXtKcK4fWXbw&usqp=CAE" />
      </div>
      <div class="detailsCon">
        <div class="level1">
          <p>Modern U shaped Luxury Sofa</p>
        </div>
        <div class="level2">
          <p>Tufted · Leather · Wood</p>
        </div>
        <div class="level3">
          <p>US ,700</p>
        </div>
        <div class="level4">
          <p>Used Once | Excellent Condition</p>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

要解决此问题，请设置 position to absolute of dynamicDataHoverHighlight div。

.shelf2 {
  position: absolute;
  top: 14%;
  left: 0%;
  width: 100%;
}

.shelf2 .dynamicShelf2Items {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  position: relative;
  margin-top: 4%;
  left: 18%;
  width: 64%;
}

.shelf2 .dynamicShelf2Items .dynamicData {
  width: 100%;
  height: 13em;
  border-bottom: 1px solid #9b9999;
  cursor: pointer;
  position:relative;
}

.shelf2 .dynamicShelf2Items .dynamicData:hover {
  background-color: #f2f0f0;
}

.shelf2 .dynamicShelf2Items .dynamicData .dynamicDataHoverHighlight {
  display: none;
  position: absolute;
  top: 0%;
  left: 0%;
  width: 1.2%;
  height: 13em;
  background-color: rgb(3, 149, 3);
}

.shelf2 .dynamicShelf2Items .dynamicData:hover>.dynamicDataHoverHighlight {
  display: flex;
}

.shelf2 .dynamicShelf2Items .dynamicData .imgCon {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  top: 0%;
  left: 1.5%;
  width: 30%;
  height: 100%;
}

.shelf2 .dynamicShelf2Items .dynamicData img {
  position: absolute;
  top: 10%;
  left: 5%;
  width: 90%;
  height: 80%;
}

.shelf2 .dynamicShelf2Items .dynamicData .detailsCon {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  top: -100%;
  left: 32%;
  width: 62%;
  height: 100%;
}

.shelf2 .dynamicShelf2Items .dynamicData .detailsCon .level1 {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 10%;
  left: 0%;
  width: 100%;
  height: 15%;
}

.shelf2 .dynamicShelf2Items .dynamicData .detailsCon .level1 p {
  position: absolute;
  left: 0%;
  font-size: 1.3vw;
  font-weight: 500;
  font-family: 'Roboto', sans-serif;
  margin-top: auto;
  margin-bottom: auto;
}

.shelf2 .dynamicShelf2Items .dynamicData .detailsCon .level2 {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 30%;
  left: 0%;
  width: 100%;
  height: 15%;
}

.shelf2 .dynamicShelf2Items .dynamicData .detailsCon .level2 p {
  position: absolute;
  left: 0%;
  font-size: 1.1vw;
  font-weight: 400;
  font-family: 'Roboto', sans-serif;
  margin-top: auto;
  margin-bottom: auto;
}

.shelf2 .dynamicShelf2Items .dynamicData .detailsCon .level3 {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 25%;
  left: 0%;
  width: 100%;
  height: 30%;
}

.shelf2 .dynamicShelf2Items .dynamicData .detailsCon .level3 p {
  position: absolute;
  left: 0%;
  font-size: 1.5vw;
  font-weight: 700;
  font-family: 'Roboto', sans-serif;
  margin-top: auto;
  margin-bottom: auto;
}

.shelf2 .dynamicShelf2Items .dynamicData .detailsCon .level4 {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 10%;
  left: 0%;
  width: 100%;
  height: 15%;
}

.shelf2 .dynamicShelf2Items .dynamicData .detailsCon .level4 p {
  position: absolute;
  left: 0%;
  font-size: 1.1vw;
  font-weight: 400;
  font-family: 'Roboto', sans-serif;
  margin-top: auto;
  margin-bottom: auto;
}

<div class="shelf2">
  <div class="dynamicShelf2Items">
    <div class="dynamicData">
      <div class="dynamicDataHoverHighlight">
      </div>
      <div class="imgCon">
        <img src="https://support.apple.com/library/APPLE/APPLECARE_ALLGEOS/SP790/Screen%20Shot%202019-03-19%20at%201_32_36%20PM.png" />
      </div>
      <div class="detailsCon">
        <div class="level1">
          <p>iMac 27-inches (2019) Retina 5K (4GB Graphics) in mint condition</p>
        </div>
        <div class="level2">
          <p>Apple · Mac · Grey</p>
        </div>
        <div class="level3">
          <p>US ,999</p>
        </div>
        <div class="level4">
          <p>Used Once | Excellent Condition</p>
        </div>
      </div>
    </div>
    <div class="dynamicData">
      <div class="imgCon">
        <img src="https://encrypted-tbn3.gstatic.com/shopping?q=tbn:ANd9GcSnkX1cceCzhok-fA2D5ShdGYEin2Br5zWnE_9lyssPXg_458B0ks7xhNaiVSjf9aVGhycCKlFVYxSR2wVzfGwRnso0fQwOXtKcK4fWXbw&usqp=CAE" />
      </div>
      <div class="detailsCon">
        <div class="level1">
          <p>Modern U shaped Luxury Sofa</p>
        </div>
        <div class="level2">
          <p>Tufted · Leather · Wood</p>
        </div>
        <div class="level3">
          <p>US ,700</p>
        </div>
        <div class="level4">
          <p>Used Once | Excellent Condition</p>
        </div>
      </div>
    </div>
    <div class="dynamicData">
      <div class="dynamicDataHoverHighlight">
      </div>
      <div class="imgCon">
        <img src="https://encrypted-tbn3.gstatic.com/shopping?q=tbn:ANd9GcSnkX1cceCzhok-fA2D5ShdGYEin2Br5zWnE_9lyssPXg_458B0ks7xhNaiVSjf9aVGhycCKlFVYxSR2wVzfGwRnso0fQwOXtKcK4fWXbw&usqp=CAE" />
      </div>
      <div class="detailsCon">
        <div class="level1">
          <p>Modern U shaped Luxury Sofa</p>
        </div>
        <div class="level2">
          <p>Tufted · Leather · Wood</p>
        </div>
        <div class="level3">
          <p>US ,700</p>
        </div>
        <div class="level4">
          <p>Used Once | Excellent Condition</p>
        </div>
      </div>
    </div>
    <div class="dynamicData">
      <div class="imgCon">
        <img src="https://encrypted-tbn3.gstatic.com/shopping?q=tbn:ANd9GcSnkX1cceCzhok-fA2D5ShdGYEin2Br5zWnE_9lyssPXg_458B0ks7xhNaiVSjf9aVGhycCKlFVYxSR2wVzfGwRnso0fQwOXtKcK4fWXbw&usqp=CAE" />
      </div>
      <div class="detailsCon">
        <div class="level1">
          <p>Modern U shaped Luxury Sofa</p>
        </div>
        <div class="level2">
          <p>Tufted · Leather · Wood</p>
        </div>
        <div class="level3">
          <p>US ,700</p>
        </div>
        <div class="level4">
          <p>Used Once | Excellent Condition</p>
        </div>
      </div>
    </div>
  </div>
</div>

悬停时元素脱离容器

elements geting out of container when hovered

html

css