2

在这种情况下我应该怎么做：

        <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”，但我想在文本区域和图像上都悬停。也许“文章”会更好？

4

2 回答 2

2

为什么不按照Alohchia的建议使用外部图形？这是有效的：

<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>
于 2015-12-30T00:45:31.000 回答
1

根据您的 CSS 的外观，您可以将每个图像和标题包含在单独的锚标记中，如下所示：

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

或者您可以将图片 div 容器类放在锚点或图像标签中，这样您就不需要包含 div。

如果您只想要一些悬停效果，您也可以只使用 CSS，并定位 .picture:hover 选择器并将锚标记保留在 figcaption 上。取决于你需要什么。

为了回答您的article建议，这就是W3C 所称的联合内容。相反，您可以尝试section，它提供了一个元素来指定您将包含在大纲中或主题相似的文档片段——如果您要走那条路。

于 2012-12-12T04:07:03.360 回答