html - 尝试使具有悬停效果的图像成为链接

Question

这些中的任何一个都可以使具有悬停效果的容器成为链接吗？除了页面顶部的几个文本链接外，我的主页上有六个这样的链接吗？

我认为包裹整个 div 会起作用，然后想也许我只是包裹悬停状态。都没有用。

             <a href="/organdonor.html">

            <img src="/images/console/organdonor.jpg" />

            <div class="mask">
                <h2>Organdonor.gov</h2>
                <p>GOVERNMENT</p>
            </div>

           </a> 

        </div>





    <a href="/coach.html">
        <div id="console_coach" class="view">
            <img src="/images/console/coach.jpg" />
            <div class="mask">
                <h2>Coach</h2>
                <p>FASHION</p>
            </div>
        </div>
    </a> 

Answer 1

根据 HTML5，这些都是有效的。但是，请注意旧版本的 HTML 不将非内联元素视为 anchor 标记的有效子元素。

The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links). This example shows how this can be used to make an entire advertising block into a link:

https://www.w3.org/TR/html5/text-level-semantics.html#the-a-element