<figcaption>中的链接不会在移动设备上显示</figcaption>

Question

处理由图片和悬停字幕组成的投资组合导航。以下代码在桌面上完美运行（figcaption和h3都出现在悬停中），但是当涉及到移动时，只有figcaption可见。

HTML：

<div>
    <figure>
        <figcaption><h3><a href="/link.html">Text</a></h3></figcaption>
        <img src="img.jpg">
    </figure>
</div>    

CSS：

figure {
    margin: 0;
    padding: 0;
    height: 100%;
    position: relative;
    display: block;
    overflow: hidden;
}

figcaption {
    height: 100%;
    width: 100%;
    opacity:0;
    position:absolute;
    background: rgba(0,0,0,.15);
    color: #fff;

}

figcaption h3,
figcaption h3 a {
    font-family: 'Raleway', sans-serif;
    color:white;
    font-weight: 400;
    top: 80%;
    text-align: center;
    position:relative;
    transform: translateY(-50%);
    font-size: 36px;
}

figcaption h3 a:hover,
figcaption h3 a:focus,
figcaption h3 a:active {
    font-family: 'Raleway', sans-serif;
    color:white;
    font-weight: 400;
    top: 80%;
    text-align: center;
    position:relative;
    transform: translateY(-50%);
    font-size: 36px;
    text-decoration:none;
    border-bottom: 2px solid white;
    padding-bottom: 3px;
}

jQuery的：

$(document).ready(function($){
$('figcaption').hover(
    function () {
        $(this).animate({opacity:'1'});
    },
    function () {
        $(this).animate({opacity:'0'});
    }
); });