使整个<article>标签成为一个链接

Question

我正在进行一个WordPress自定义操作，需要将整个文章标签设置为链接。
基本上，当我悬停在<article>标签上时，背景色会改变（可以正常工作），但我无法找到HTML代码将整个标签转换为链接。 我已经尝试了两种方法。

<a href="mylink">
    <article>
        /*article content: an image, header &text*/
    </article>
</a>

并且

<article>
    <a href="mylink">
        /*article content: an image, header &text*/
    </a>
</article>

- suMi

---

如果你必须将整个article作为一个链接，那就有些问题了。 - Mr. Alien

@Mr.Alien 对于博客或商店来说，将整个帖子/产品条目作为链接是非常普遍的。 - RecursiveExceptionException

Answer 1

第一段代码应该可以正常工作。给<a>标签添加类，并使用CSS的display:block属性即可。

.block{
  display: block;
}

<a class="block" href="mylink">
    <article>
        <img src="http://placehold.it/400/400" alt="" />
    </article>
</a>

- Kijan Maharjan

---

你应该明确指出（通过提出这种方式）：使用这种解决方案，你不能在文章内使用其他锚点元素。 - Roko C. Buljan

很好的观点@RokoC.Buljan。在这种情况下，JS解决方案（点击<article>事件）会很有帮助。 - Anupam

很不幸，由于a是内联元素而article是块级元素，我认为这实际上不是有效的HTML。我认为在内联元素中嵌套块级元素是不合法的。然而，我必须承认这个解决方案是最有意义的，我想不出更好的解决方案。当然，可以将a嵌套在article中，但是article通常还包含其他块级元素，例如header或h1等，因此我认为没有一种有效的HTML方法来实现它。我猜想他们会在某个时候放弃内联元素不能包含块级元素的规则。 - Stijn de Witt

啊，我变老了。根据这个答案，自从HTML5开始，将a标签包裹块级元素实际上是被允许的。这是个好消息！它使得这个答案完全有效！请注意，链接可能仍然不能包含嵌套链接或按钮等内容。 - Stijn de Witt

Answer 2

谢谢Kijan！ 你的答案差不多可以用。 我需要像这样进行调整：

<div data-lang="js" data-hide="false" data-console="true" data-babel="false" class="snippet">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>    .parent{
 position: relative;
    }
    .block{
 display: block;
 position: absolute;
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
    }

    <div class="parent">
        <a class="block" href="mylink">
            <article>
                <img src="http://placehold.it/400/400" alt="" />
            </article>
        </a>
    </div>