Как исправить ошибку при наведении курсора CSS - PullRequest
Новая
       9

Как исправить ошибку при наведении курсора CSS

0 голосов
/ 06 февраля 2019

Я кодирую страницу, чтобы выбрать разные продукты.каждый «блок билда» в моем 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 голосов
/ 06 февраля 2019

Добавьте 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 классы), которые повсюду.Они должны содержаться в «коробках».При наведении указателя эти абсолютные элементы позиции находятся за пределами блока и перекрывают другие блоки.

Помните, что при использовании абсолютного положения этот элемент с позицией самого первого родителя имеет позицию, отличную от статической, иначе это будетокно документа.

Кстати, есть ли причина, по которой вы используете классы, такие как идентификаторы?Почему у вас есть .bildbox1, .bildbox2 и т. Д., Когда у вас должен быть только 1 .bildbox класс.

...