CSS3定位和误解用法

Question

我在这个问题上遇到了困难：HERE!

正如您在我的JSFIDDLE中看到的那样，当您将鼠标悬停在图像上时，您可以看到滚动标题。我现在的问题是，当图片为show时，如何CLICKED滚动字幕？同样当我点击另一个图像时，如果它处于非活动状态，滚动标题将会隐藏。

谢谢你提前!!

Answer 1

这可以不使用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>

的 CSS

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

JS FIDDLE
我创建了一个非常基本的jsfiddle来演示功能：http://jsfiddle.net/TheNix/6vUVP/1/

Answer 2

选项1：    http://jsfiddle.net/m3fU3/4/    现在检查..

我认为这就是你想要的？ 只需用活动替换css中的悬停，活动就是外行人的条款，即css上的点击选择器。

示例：

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

选项2： 您可以使用 javascript 点击功能：

HTML：

<img  src="image.png" id="image1" onclick="zoomImage()"/></a>

JS：

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

检查here