如何修复有问题的CSS悬停

时间：2019-02-05 21:00:52

标签： html css debugging hover

我正在编码一个页面以选择其他产品。 HTML中的每个“帐单框”都应该显示一个产品，当您将鼠标悬停在该产品上时，它将放大图片，并发生其他一些样式效果。当您将鼠标悬停在框上时，框会随机缩放，并且看起来有些毛刺。这是效果的演示：https://streamable.com/wei69

我尝试指定不同的悬停框，这会使代码不必要地冗长，并且无法解决问题。在我这样做之前，没有像“ title1，title2”这样的类，它只是“ title”。 我还尝试了不同的浏览器，在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>

1 个答案:

答案 0 :(得分：0)

向您的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类）。它们需要包含在“框”中。当您将鼠标悬停时，这些位置绝对元素位于框的外部并与其他框重叠。

请记住，在使用绝对位置时，该元素的第一个父对象的位置本身的位置应为非静态位置，否则将是文档窗口。

顺便说一句，使用id之类的类是否有原因？为什么只需要1个.bildbox1类，为什么会有.bildbox2，.bildbox等。

相关问题
最新问题