如何修复马车CSS悬停

Question

我编码一个页面，选择不同的产品。在我的HTML每个“图片报箱”应该显示产品，当你在它与你的鼠标悬停，它放大到图片和其他一些造型效果发生。当鼠标悬停在框中可以看到，它随机箱子放大，它看起来出问题。下面是效果演示：https://streamable.com/wei69

我试图指定不同的悬停箱这​​使得代码不必要的长时间，并没有解决问题。我这样做之前有没有像班“TITLE1，标题2”也只是“标题”。我也尝试过不同的浏览器和Safari中的效果并不坏，但它仍然不是用户友好的。这里是我的代码：

#flex-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-pack: distribute;
  justify-content: space-around;
}

.bildbox1,
.bildbox2,
.bildbox3,
.bildbox4,
.bildbox5,
.bildbox6 {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: 300px;
  overflow: hidden;
  text-align: center;
}

.bild1,
.bild2,
.bild3,
.bild4,
.bild5 {
  width: 100%;
  height: 100%;
  background-color: black;
  /* fallback color */
  background-position: center;
  background-size: cover;
  -webkit-transition: all .3s ease;
}

.bild1 {
  background-image: url("//cdn.shopify.com/s/files/1/0031/3252/2611/files/selfie-413162_960_720_large.jpg?v=1549398130");
}

.bild2 {
  background-image: url("//cdn.shopify.com/s/files/1/0031/3252/2611/files/selfie-413162_960_720_large.jpg?v=1549398130");
}

.bild3 {
  background-image: url("//cdn.shopify.com/s/files/1/0031/3252/2611/files/selfie-413162_960_720_large.jpg?v=1549398130");
}

.bild4 {
  background-image: url("//cdn.shopify.com/s/files/1/0031/3252/2611/files/selfie-413162_960_720_large.jpg?v=1549398130");
}

.bild5 {
  background-image: url("//cdn.shopify.com/s/files/1/0031/3252/2611/files/selfie-413162_960_720_large.jpg?v=1549398130");
}

.textbox {
  background-color: #F2F2F2;
  height: 100%;
  padding-top: 20%;
  text-align: center;
}

.textbox p {
  color: darkgrey;
}

.point1,
.point2,
.point3,
.point4,
.point5 {
  width: 75px;
  margin: auto;
  position: absolute;
  top: 10px;
  left: 0;
  bottom: 0;
  right: 0;
  height: 1px;
  background: white;
  -webkit-transition: width .3s ease;
  -o-transition: width .3s ease;
  transition: width .3s ease;
  display: none;
}

.konfigurieren-button1,
.konfigurieren-button2,
.konfigurieren-button3,
.konfigurieren-button4,
.konfigurieren-button5 {
  background: #E30D27;
  color: white;
  padding: 0 10px;
  text-align: center;
  height: 30px;
  line-height: 1.2;
  vertical-align: top;
  font-weight: bold;
  font-size: 10px;
  @include inline-flexbox();
  @include align-items(center);
  @include justify-content(center);
  -webkit-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  -webkit-appearance: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smoothing: antialiased;
  border-radius: 100px;
  position: relative;
  top: 50px;
  z-index: 99;
}

.title1,
.title2,
.title3,
.title4,
.title5 {
  color: #ffffff !important;
  font-family: sans-serif;
  text-align: center;
  margin: auto;
  position: relative;
  top: 100px;
  left: 0;
  bottom: 0;
  right: 0;
  height: 50px;
  display: block;
  color: white;
  padding: 25%;
}

.konfigurieren-button1:hover,
.konfigurieren-button2:hover,
.konfigurieren-button3:hover,
.konfigurieren-button4:hover,
.konfigurieren-button5:hover,
{
  color: black;
  background-color: white;
}

@media (hover: hover) {
  .bildbox1:hover .bild1,
  .bildbox1:focus .bild1 {
    -webkit-transform: scale(1.15);
    -ms-transform: scale(1.15);
    transform: scale(1.15);
  }
  .bildbox2:hover .bild2,
  .bildbox2:focus .bild2 {
    -webkit-transform: scale(1.15);
    -ms-transform: scale(1.15);
    transform: scale(1.15);
  }
  .bildbox3:hover .bild3,
  .bildbox3:focus .bild3 {
    -webkit-transform: scale(1.15);
    -ms-transform: scale(1.15);
    transform: scale(1.15);
  }
  .bildbox4:hover .bild4,
  .bildbox4:focus .bild4 {
    -webkit-transform: scale(1.15);
    -ms-transform: scale(1.15);
    transform: scale(1.15);
  }
  .bildbox5:hover .bild5,
  .bildbox5:focus .bild5 {
    -webkit-transform: scale(1.15);
    -ms-transform: scale(1.15);
    transform: scale(1.15);
  }
  .bildbox1:hover .title1,
  .bildbox2:hover .title2,
  .bildbox3:hover .title3,
  .bildbox4:hover .title4,
  .bildbox5:hover .title5 {
    color: #ffffff !important;
    font-family: sans-serif;
    text-align: center;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    height: 50px;
    opacity: 1.0;
    color: white;
    padding: 25%;
  }
  .point1,
  .point2,
  .point3,
  .point4,
  .point5 {
    width: 0px;
    display: initial;
    top: 17%;
  }
  .title1,
  .title2,
  .title3,
  .title4,
  .title5 {
    opacity: 0.0;
    position: absolute;
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
    top: 0;
  }
  .konfigurieren-button1,
  .konfigurieren-button2,
  .konfigurieren-button3,
  .konfigurieren-button4,
  .konfigurieren-button5 {
    opacity: 0.0;
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
    margin-top: 135px;
  }
  .bildbox1:hover .konfigurieren-button1,
  .bildbox2:hover .konfigurieren-button2,
  .bildbox3:hover .konfigurieren-button3,
  .bildbox4:hover .konfigurieren-button4,
  .bildbox5:hover .konfigurieren-button5 {
    opacity: 1.0;
  }
  .bildbox1:hover .point1,
  .bildbox2:hover .point2,
  .bildbox3:hover .point3,
  .bildbox4:hover .point4,
  .bildbox5:hover .point5 {
    width: 75px;
  }
}

@media (min-width: 900px) {
  .bildbox1,
  .bildbox2,
  .bildbox3,
  .bildbox4,
  .bildbox5,
  .bildbox6 {
    width: 400px;
  }
}

<div id="flex-container">
  <div class="bildbox1">
    <div class="bild1">
      <span class="title1"> Text 1</span>
      <a href="">
        <button class="konfigurieren-button1"> Button 1</button>
      </a>
      <div class="point1"></div>
    </div>
  </div>
  <div class="bildbox2">
    <div class="bild2">
      <span class="title2"> Text 2</span>
      <button class="konfigurieren-button2">Button 2</button>
      <div class="point2"></div>
    </div>
  </div>
  <div class="bildbox3">
    <div class="bild3">
      <span class="title3">Text 3</span>
      <button class="konfigurieren-button3">Button 3</button>
      <div class="point3"></div>
    </div>
  </div>
  <div class="bildbox4">
    <div class="bild4">
      <span class="title4"> Text 4</span>
      <button class="konfigurieren-button4">Button 4</button>
      <div class="point4"></div>
    </div>
  </div>
  <div class="bildbox5">
    <div class="bild5">
      <span class="title5"> Text 5</span>
      <button class="konfigurieren-button5">Button 5</button>
      <div class="point5"></div>
    </div>
  </div>
  <div class="bildbox6">
    <div class="textbox">
      <h3> header </h3>
      <p> paragraph
      </p>
    </div>
  </div>
</div>

Answer 1

你position: relative;类添加.bildbox。

  .bildbox1,
  .bildbox2,
  .bildbox3,
  .bildbox4,
  .bildbox5,
  .bildbox6 {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    height: 300px;
    overflow: hidden;
    text-align: center;
    position: relative; /* <-- Add this here */
  }

你必须是所有的地方position: absolute;元素（您.point类）。他们需要被包含在“盒子”。当你徘徊，这些位置绝对元素的框和重叠其他框外。

当使用绝对位置，该元素与静态以外的位置的第一父摆正自己的位置，否则它会在文档窗口记住。

在一个侧面说明，有没有你使用的是像IDS类的理由？为什么你有.bildbox1，.bildbox2等时，你应该只需要1 .bildbox类。