Question

我想制作一个100％的css滑块。下面的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

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

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

css滑块下方的文字

1 个答案: