html - CSS slider 下方的文本

Question

我想制作一个 100% CSS slider 。下面 jsfiddle 中的 slider 有效，但我想在图像下方添加随图像移动的文本。我被困在那里。我不明白为什么文本根本不显示。

请帮忙...

jsFiddle

html

<div class="slider-wrap">
  <div id="slider">
    <div class="jt_slides">
      <div class="jerslides">
        <a href="#"><img src="https://blog.psprint.com/sites/default/files/2014/06/Palette-Fathers-Day-COLOURlovers-Google-Chrome_2014-06-10_14-53-52.png" alt=""></a>
        <a href="#" class="more-link"> More... </a>
        <h2 class="title"><a href="#">Title text 1</a></h2>
        <div class="excerpt">
          <div class="stars"><span>&#9733;</span><span>&#9733;</span><span>&#9733;</span><span>&#9733;</span><span>&#9733;</span></div>
          <p class="whatever" href="#">Some text 1</p>
        </div>
      </div>
      <div class="jerslides">
        <a href="#"><img src="https://blog.psprint.com/sites/default/files/2014/05/Palette-Lookin-Like-Summer-COLOURlovers-Google-Chrome_2014-05-29_10-07-53.png" alt=""></a>
        <a href="#" class="more-link"> More... </a>
        <h2 class="title"><a href="#">Title text 2</a></h2>
        <div class="excerpt">
          <div class="stars"><span>&#9733;</span><span>&#9733;</span><span>&#9733;</span><span>&#9733;</span><span>&#9733;</span></div>
          <p class="whatever" href="#">Some text 2</p>
        </div>
      </div>
      <div class="jerslides">
        <a href="#"><img src="https://blog.psprint.com/sites/default/files/2014/04/Palette-Mothers-Day-COLOURlovers-Google-Chrome_2014-04-28_09-24-37.png" alt=""></a>
        <a href="#" class="more-link"> More... </a>
        <h2 class="title"><a href="#">Title text 3</a></h2>
        <div class="excerpt">
          <div class="stars"><span>&#9733;</span><span>&#9733;</span><span>&#9733;</span><span>&#9733;</span><span>&#9733;</span></div>
          <p class="whatever" href="#">Some text 3</p>
        </div>
      </div>
      <div class="jerslides">
        <a href="#"><img src="https://blog.psprint.com/sites/default/files/2014/06/Palette-Fathers-Day-COLOURlovers-Google-Chrome_2014-06-10_14-53-52.png" alt=""></a>
        <a href="#" class="more-link"> More... </a>
        <h2 class="title"><a href="#">Title text 4</a></h2>
        <div class="excerpt">
          <div class="stars"><span>&#9733;</span><span>&#9733;</span><span>&#9733;</span><span>&#9733;</span><span>&#9733;</span></div>
          <p class="whatever" href="#">Some text 4</p>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

div.slider-wrap {
  width: 640px;
  height: 100%;
  float: left
}

div#slider {
  width: 80%;
  max-width: 640px;
}

div#slider .jt_slides {
  position: relative;
  width: 400%;
  margin: 0;
  padding: 0;
  font-size: 0;
  text-align: left;
}

div#slider .jerslides {
  width: 25%;
  height: auto;
  float:left
}

div#slider {
  width: 100%;
  max-width: 600px;
  overflow: hidden;
  margin: 26px auto 0;
}

@keyframes slidy {
  0% {
    left: 0%;
  }
  29% {
    left: 0%;
  }
  33% {
    left: -100%;
  }
  62% {
    left: -100%;
  }
  67% {
    left: -200%;
  }
  96% {
    left: -200%;
  }
  100% {
    left: -300%;
  }
}

div#slider .jt_slides {
  position: relative;
  width: 400%;
  margin: 0;
  padding: 0;
  font-size: 0;
  left: 0;
  text-align: left;
  animation: 16s slidy infinite;
}

div#slider:hover .jt_slides {
  /*transition: opacity .5s;*/
  opacity: 0.9;
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  -o-animation-play-state: paused;
  animation-play-state: paused;
}

.jerslides img {
  margin-bottom: 20px
}

.jerslides .more-link {
  float: right;
  margin: 0 0 10px 10px;
}

Answer 1

文本在那里，但它没有出现，因为它从其祖先元素 div#slider .jt_slides 继承了 font-size: 0;。删除该规则，文本将按预期运行。

顺便说一下，你的 CSS 包含多个 rule-sets对于一些 HTML 元素，例如 div#slider .jt_slides。通常，将重复项合并到一个规则集中是个好主意。这可以减少混淆并使以后更改 CSS 更容易。这是因为如果仅在其中一个规则集中定义了 CSS 规则，它仍然适用。例如这里，由于 div#slider .jt_slides 有两个规则集并且都包含规则 font-size: 0;，如果您只删除 font-size: 0; 从一个规则集中，它仍然适用，因为它仍在另一个规则集中。合并意味着当您删除一次 font-size: 0; 时，您就知道它永远消失了。