CSS3定位及使用误区

Question

我在这一点上遇到了困难：HERE!

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

提前谢谢你！！

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中的悬停替换为active，因为active是外行术语，css上的点击选择器。

示例：

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

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

HTML：

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

JS：

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

检查here