尝试使用悬停效果制作图像链接

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并未将非内联元素视为锚标记的有效子元素。

  

只要在其中没有交互式内容（例如按钮或其他链接），a元素可以围绕整个段落，列表，表格等，甚至整个部分。此示例显示了如何将整个广告块用于链接：

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