Javascript CSS3定位与误用

我在这件事上有点困难：

正如您在my

JSFIDLE

中看到的，当您将鼠标悬停在图像上时，您可以看到滚动标题。我现在的问题是，单击图像时如何显示滚动标题？同样地，当我点击另一个图像时，它处于非活动状态，滚动标题将隐藏

提前谢谢你

选项1: 现在查一下

我想这就是你想要的？ 只要用active替换css中的悬停，因为active是外行的术语，css上的点击选择器

例如：

 .cap-left:active figcaption{
      left: 0;
      }

选项2: 您可以使用javascriptonclick功能：

HTML:

---

选中

这在不使用Javascript的情况下是可能的，但您需要稍微重写一下HTML

基本上，您要做的是创建一个隐藏的复选框或单选按钮，覆盖图像。然后，您可以使用CSS检查其

：checked

状态，并相应地隐藏/显示内容

HTML

<figure class="item">
   <label for="toggle" class="item__toggle"></label>
   <input id="toggle" type="radio" name="item__togglers" class="item__check">
   <img src="http://lorempixel.com/200/200/technics" alt="">
   <figcaption class="item__caption">Hello world</figcaption>
</figure>

JS小提琴

---

我创建了一个非常基本的JSFIDLE来演示其功能：

我悬停在图像上，我看到了标题。但是如果我点击图片，我会被带到另一个页面吗？我不明白。看看我的答案是否有效。你也可以使用jquery…-ve投票者，介意评论一下有什么问题吗？谢谢你的回答。选项1接近我的预期结果。我真正想说的是，当我单击图像时，标题将在该图像上保持可见。请看@Nix的答案，它与此类似。无论如何，谢谢你！顺便说一句，我不是投票否决你答案的人。当我的类是

时，我如何使用
JQuery.addClass函数
。左帽：活动figcaption

？请投票否决者解释我的答案有什么问题？据我所知，它解决了所描述的问题。谢谢你的回答。。顺便说一句，我不是那个否决你答案的人。你的回答都是正确的，我真的很感激。

function zoomImage(){
 e.preventDefault();
 document.getElementById('image1').zoom=2;
}

<figure class="item">
   <label for="toggle" class="item__toggle"></label>
   <input id="toggle" type="radio" name="item__togglers" class="item__check">
   <img src="http://lorempixel.com/200/200/technics" alt="">
   <figcaption class="item__caption">Hello world</figcaption>
</figure>

.item {
    display: inline-block;
    position: relative;
}

.item__caption {
    background: #fff;
    opacity: 0;
    position: absolute;
        bottom: 15px;
        left: 0;
}

/* TOGGLE MECHANISM */
.item__toggle {
    height: 100%;
    position: absolute;
        top: 0;
        left: 0;
    width: 100%;
}

.item__check {
    display: none;
}

/* THIS IS WHERE THE MAGIC HAPPENS */

.item:hover .item__caption,
.item__check:checked ~ .item__caption {
    opacity: 1;    
}