Home > Net >  elements geting out of container when hovered
elements geting out of container when hovered

Time：05-28

I have a list of elements ordered vertically which displays certain data like an image, a title, and a description. I have a div named .dynamicDataHoverHighlight inside of the container with a display set to none. What I wanted to do was when I hovered on a specific container with all the data I wanted that div to have display flex but whenever I hover to display that div it works and will be visible but the other data on that parent container will get out of the container I assigned them and will get aligned to the next container under then. To better understand my problem if you hover on the first container from the list of containers you will see the IMG and the data next to it will get out of that container and move to the one below them. How can I fix this and make them stay in thier specific container? Note the hover to display div is only set to work only when hovered on the first container and the third the others won't do anything except change their background color.

.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 >
  <div >
    <div >
      <div >
      </div>
      <div >
        <img src="https://support.apple.com/library/APPLE/APPLECARE_ALLGEOS/SP790/Screen Shot 2019-03-19 at 1_32_36 PM.png" />
      </div>
      <div >
        <div >
          <p>iMac 27-inches (2019) Retina 5K (4GB Graphics) in mint condition</p>
        </div>
        <div >
          <p>Apple · Mac · Grey</p>
        </div>
        <div >
          <p>US $1,999</p>
        </div>
        <div >
          <p>Used Once | Excellent Condition</p>
        </div>
      </div>
    </div>
    <div >
      <div >
        <img src="https://encrypted-tbn3.gstatic.com/shopping?q=tbn:ANd9GcSnkX1cceCzhok-fA2D5ShdGYEin2Br5zWnE_9lyssPXg_458B0ks7xhNaiVSjf9aVGhycCKlFVYxSR2wVzfGwRnso0fQwOXtKcK4fWXbw&usqp=CAE" />
      </div>
      <div >
        <div >
          <p>Modern U shaped Luxury Sofa</p>
        </div>
        <div >
          <p>Tufted · Leather · Wood</p>
        </div>
        <div >
          <p>US $5,700</p>
        </div>
        <div >
          <p>Used Once | Excellent Condition</p>
        </div>
      </div>
    </div>
    <div >
      <div >
      </div>
      <div >
        <img src="https://encrypted-tbn3.gstatic.com/shopping?q=tbn:ANd9GcSnkX1cceCzhok-fA2D5ShdGYEin2Br5zWnE_9lyssPXg_458B0ks7xhNaiVSjf9aVGhycCKlFVYxSR2wVzfGwRnso0fQwOXtKcK4fWXbw&usqp=CAE" />
      </div>
      <div >
        <div >
          <p>Modern U shaped Luxury Sofa</p>
        </div>
        <div >
          <p>Tufted · Leather · Wood</p>
        </div>
        <div >
          <p>US $5,700</p>
        </div>
        <div >
          <p>Used Once | Excellent Condition</p>
        </div>
      </div>
    </div>
    <div >
      <div >
        <img src="https://encrypted-tbn3.gstatic.com/shopping?q=tbn:ANd9GcSnkX1cceCzhok-fA2D5ShdGYEin2Br5zWnE_9lyssPXg_458B0ks7xhNaiVSjf9aVGhycCKlFVYxSR2wVzfGwRnso0fQwOXtKcK4fWXbw&usqp=CAE" />
      </div>
      <div >
        <div >
          <p>Modern U shaped Luxury Sofa</p>
        </div>
        <div >
          <p>Tufted · Leather · Wood</p>
        </div>
        <div >
          <p>US $5,700</p>
        </div>
        <div >
          <p>Used Once | Excellent Condition</p>
        </div>
      </div>
    </div>
  </div>
</div>

CodePudding user response：

To fix this set the 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 >
  <div >
    <div >
      <div >
      </div>
      <div >
        <img src="https://support.apple.com/library/APPLE/APPLECARE_ALLGEOS/SP790/Screen Shot 2019-03-19 at 1_32_36 PM.png" />
      </div>
      <div >
        <div >
          <p>iMac 27-inches (2019) Retina 5K (4GB Graphics) in mint condition</p>
        </div>
        <div >
          <p>Apple · Mac · Grey</p>
        </div>
        <div >
          <p>US $1,999</p>
        </div>
        <div >
          <p>Used Once | Excellent Condition</p>
        </div>
      </div>
    </div>
    <div >
      <div >
        <img src="https://encrypted-tbn3.gstatic.com/shopping?q=tbn:ANd9GcSnkX1cceCzhok-fA2D5ShdGYEin2Br5zWnE_9lyssPXg_458B0ks7xhNaiVSjf9aVGhycCKlFVYxSR2wVzfGwRnso0fQwOXtKcK4fWXbw&usqp=CAE" />
      </div>
      <div >
        <div >
          <p>Modern U shaped Luxury Sofa</p>
        </div>
        <div >
          <p>Tufted · Leather · Wood</p>
        </div>
        <div >
          <p>US $5,700</p>
        </div>
        <div >
          <p>Used Once | Excellent Condition</p>
        </div>
      </div>
    </div>
    <div >
      <div >
      </div>
      <div >
        <img src="https://encrypted-tbn3.gstatic.com/shopping?q=tbn:ANd9GcSnkX1cceCzhok-fA2D5ShdGYEin2Br5zWnE_9lyssPXg_458B0ks7xhNaiVSjf9aVGhycCKlFVYxSR2wVzfGwRnso0fQwOXtKcK4fWXbw&usqp=CAE" />
      </div>
      <div >
        <div >
          <p>Modern U shaped Luxury Sofa</p>
        </div>
        <div >
          <p>Tufted · Leather · Wood</p>
        </div>
        <div >
          <p>US $5,700</p>
        </div>
        <div >
          <p>Used Once | Excellent Condition</p>
        </div>
      </div>
    </div>
    <div >
      <div >
        <img src="https://encrypted-tbn3.gstatic.com/shopping?q=tbn:ANd9GcSnkX1cceCzhok-fA2D5ShdGYEin2Br5zWnE_9lyssPXg_458B0ks7xhNaiVSjf9aVGhycCKlFVYxSR2wVzfGwRnso0fQwOXtKcK4fWXbw&usqp=CAE" />
      </div>
      <div >
        <div >
          <p>Modern U shaped Luxury Sofa</p>
        </div>
        <div >
          <p>Tufted · Leather · Wood</p>
        </div>
        <div >
          <p>US $5,700</p>
        </div>
        <div >
          <p>Used Once | Excellent Condition</p>
        </div>
      </div>
    </div>
  </div>
</div>

Page link：https//www.codepudding.com/net/422814.html

Prev:Hamburger menu z-index issue
Next:I am trying to style images in a div class in css but it will not work for me. Why is this?
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding