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

Question

我想在我的缩略图滑块div 之后显示我的文本div 像这样，我的活动滑块类："itm0 selected"我的缩略图 ID："拇指"我想在我的 #thumbsdiv 处于活动状态时自动在它下方显示文本我试过这个 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> 

当第二个 IMG 在滑块中处于活动状态时

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

等。

有人有解决方案吗？或者我如何在JavaScript中做到这一点？我是新手..给一些想法的朋友

Answer 1

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

小提琴：https://jsfiddle.net/79fryyz1/

.HTML

我在 #thumbsdiv 下添加了一个额外的div。我给它上了一堂课，叫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

更改图像滑块并选择新图像时，您可以从 data 属性中选取标题并将其显示在#thumbsdiv 下。

$('.toggleBtn').click(function() {
    $('img').toggleClass('selected');
    var caption = $('img.selected').data('caption');
    $('.caption').html(caption);
});

Answer 2

这是一种奇怪的方法，但这是它的工作原理......

.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>