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>

figcaption は a 要素の外では使えませんが、テキストエリアと画像の両方にホバーさせたいです。たぶん「記事」の方がいいでしょうか？

4

2 に答える 2

2

Alohchi が提案するように、なぜa外部図を使用しないのですか? これは有効です:

<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 に答える