在媒体查询中强制悬停状态

Question

我想知道在移动媒体查询中显示“：hover”的最佳方法是什么。

例如，我有几个缩略图，其悬停状态带有“更多信息”按钮。

由于我无法在移动设备上悬停，使用媒体查询“锁定”悬停状态的最佳方式是什么（以便悬停始终显示在768px下）？

这是目前正在发生的事情的小提琴： http://jsfiddle.net/yashar/XgGFf/48/

我知道这个CSS是不可能的，但仅作为一个例子：

@media only screen and (max-width : 768px) {
    .figTop {
        display:hover;
    }
}

HTML：

<figure class="figTop">
    <div class="ca-img">
        <img src="images/gallery/page_thumbs/ford_thumb.jpg" alt="Ford">
    </div>
    <figcaption>
        <div class="fRect">

<h5>Ford</h5>

<sub>Commercial</sub>

            <button class="btns btn-3 btn-3g" data-gallery="1">More Info</button>
        </div>
    </figcaption>
</figure>