我想在我的缩略图滑块 div 之后显示我的文本

Question

我想在我的缩略图滑块后显示我的文字 div 像这样，我的活动滑块 class：“itm0 selected” 我的缩略图 ID："thumbs" 我想在我的 #thumbs div 处于活动状态时自动显示文本我尝试了这个 CSS，但没有成功，

.itm0 .selected{
    #thumbs::after{
         content:"first active image";
    }
}

.itm2 .selected{            
    #thumbs::after{
         content:"second active image";
    }
}

html:

<div id="thumbs">
  <img class="itm0 selected"></img>
  <img class="itm1"></img>
</div>

当第 2 个 img 在滑块中处于活动状态时

<div id="thumbs">
   <img class="itm0"></img>
   <img class="itm1 selected"></img>
</div>

等等

有人有解决办法吗？或者我怎样才能在 javascript 中做到这一点？我是新手..给点意见朋友

Answer 1

这是一种奇怪的方式，但它是这样工作的...

.thumbs { 
  width:100px;
  height:100px;
  float:left;
  margin:10px;
  background:green;
}

.thumbs:after {
  content: ' ';
  position:absolute;
  background:#000;
  color:#fff;
  border-radius:5px;margin:100px 0 0;
}

.thumbs:nth-child(1):hover:after {
   content:"first thumb";
}

.thumbs:nth-child(2):hover:after {
   content:"second thumb";
}

<div class="thumbs"></div>
<div class="thumbs"></div>

Answer 2

如果您愿意使用 jQuery，您可以执行以下操作。

Fiddle: https://jsfiddle.net/79fryyz1/

HTML

我在#thumbs div 下添加了一个额外的 div。我给了它一个 class 叫做 caption。这将用于显示 div 下的文本。然后，我添加了一个名为 data-caption 的数据属性来存储要在每个图像之后显示的文本。为了演示目的，我还添加了一个切换按钮。

<div id="thumbs">
    <img class="itm0 selected" src="http://bit.ly/1S6znnc" data-caption="first active image"/>
    <img class="itm1" src="http://bit.ly/1MKyvBI" data-caption="second active image"/>
</div>
<div class="caption">first active image</div>
<a href="#" class="toggleBtn">Toggle</a>

JS

当更改图像滑块并选择新图像时，您可以从数据属性中选取标题并将其显示在 #thumbs div.

下

$('.toggleBtn').click(function() {
    $('img').toggleClass('selected');

    var caption = $('img.selected').data('caption');
    $('.caption').html(caption);
});

我想在我的缩略图滑块 div 之后显示我的文本

I want to display my text after my thumbnail slider div

javascript

css

jquery

slider