HTML5 <figure> 在我的例子中的用法

Question

这种情况我该怎么办:

        <figure>
            <a href="#" class="portfolio-item">
                <div class="picture"><img src="images/portfolio/recent-01.jpg" alt=""/><div class="image-overlay-link"></div></div>
                <figcaption class="item-description">
                    <h5>Mountain Landscapes</h5>
                    <span>Photography</span>
                </figcaption>
            </a>
        </figure>

我无法在“a”元素之外使用“figcaption”，但我想将鼠标悬停在文本区域和图像上。也许“文章”会更好？

Answer 1

为什么不使用a外部数字，如 suggested by Alohchi ？这是有效的:

<a href="#" class="portfolio-item">
    <figure>
        <div class="picture">
            <img src="images/portfolio/recent-01.jpg" alt=""/>
            <div class="image-overlay-link"></div>
        </div>
        <figcaption class="item-description">
            <h5>Mountain Landscapes</h5>
            <span>Photography</span>
        </figcaption>
    </figure>
</a>