我試圖創(chuàng)建一個(gè)無限循環(huán)的圖像橫幅，但似乎在懸停添加圖像覆蓋后，只有滾動(dòng)元素div的第一項(xiàng)似乎呈現(xiàn)。檢查元素告訴我，呈現(xiàn)的項(xiàng)目的寬度與所有子元素的總和相同，但是唯一顯示的是第一個(gè)元素。

在我添加了overlay-container和img-overlay類來覆蓋滾動(dòng)圖片上的文本之后，問題出現(xiàn)了。

以下是我的代碼:

HTML:

<div class="scroll-parent">
  <div class="scroll-element primary">
    <a class="overlay-container" href="">
      <img src="Pictures/Exterior1.jpg">
      <div class="img-overlay">35 Chem Meredith</div>
    </a>
    <a class="overlay-container" href="">
      <img src="Pictures/Exterior1.jpg">
      <div class="img-overlay">50 Chem Meredith</div>
    </a>
    <a class="overlay-container" href="">
      <img src="Pictures/Exterior1.jpg">
      <div class="img-overlay">35 Chem Meredith</div>
    </a>
  </div>
  <div class="scroll-element secondary">
    <a class="overlay-container" href="">
      <img src="Pictures/Exterior1.jpg">
      <div class="img-overlay">35 Chem Meredith</div>
    </a>
    <a class="overlay-container" href="">
      <img src="Pictures/Exterior1.jpg">
      <div class="img-overlay">50 Chem Meredith</div>
    </a>
    <a class="overlay-container" href="">
      <img src="Pictures/Exterior1.jpg">
      <div class="img-overlay">35 Chem Meredith</div>
    </a>
  </div>
</div>

CSS:

.scroll-parent {
  position: relative;
  width: 100vw;
  height: 500px;
  padding: 2rem 0;
  overflow-x: hidden;
}

.scroll-parent::after{
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 100vw; height: 500px;
  pointer-events: none;
  background: -moz-linear-gradient(left,  rgba(255,255,255,1) 0%, rgba(255,255,255,1) 15%,   rgba(255,255,255,0) 25%, rgba(255,255,255,0) 75%, rgba(255,255,255,1) 85%, rgba(255,255,255,1) 100%);
  background: -webkit-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 15%,rgba(255,255,255,0) 25%,rgba(255,255,255,0) 75%,rgba(255,255,255,1) 85%,rgba(255,255,255,1) 100%);
  background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 15%,rgba(255,255,255,0) 25%,rgba(255,255,255,0) 75%,rgba(255,255,255,1) 85%,rgba(255,255,255,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 );
}

.scroll-element {
  width: inherit;
  height: inherit;
  position: absolute;
  left: 0%;
  top: 0%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.scroll-element img {
  width: auto;
  height: 400px;
  border-radius: 10px;
  transition: 0.2s;
}

.scroll-element img:hover {
  scale: 1.05;
}

.primary {
  animation: primary 5s linear infinite;
}

.secondary {
  animation: secondary 5s linear infinite;
}

@keyframes primary {
  from {
    left: 0%;
  }
  to {
    left: -100%;
  }
}

@keyframes secondary {
  from {
    left: 100%;
  }
  to {
    left: 0%;
  }
}

.overlay-container{
  position: absolute;
}

.img-overlay {
  position: absolute; 
  bottom: 0; 
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5); /* Black see-through */
  color: #f1f1f1; 
  width: 100%;
  transition: .2s ease;
  opacity:0;
  color: white;
  font-size: 20px;
  padding: 20px 0;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  text-align: center;
}

.overlay-container:hover .img-overlay {
  opacity: 1;
  pointer-events: none;
}

這里是我用的圖片，如果它可能是有用的https://ibb.co/DGpwkvD

老實(shí)說，我找不到導(dǎo)致這個(gè)問題的原因。

我變了

.overlay-container{
  position: absolute;
}

到

.overlay-container{
  position: relative;
}

修復(fù)了該問題。