javascript - CSS3定位及误区使用

Question

<分区>

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/