Html 如何在整个图片上激活链接，尽管存在'；它的一部分已经有另一个链接了吗？

我有一个包含标题、类别、类别链接、图片和图片全局链接的互动程序。实际上，此全局链接仅在图片区域的一部分中处于活动状态。我希望它是全球性的

以下是HTML：

<div id="article">
<div class="block-module">
<a class="view-full-module" href="http://www.cosmos.com/Common/Images/Destinations/machupicchu3.jpg">
<img class="image" src="http://www.cosmos.com/Common/Images/Destinations/machupicchu3.jpg"/>
</a>
     <div class="block-about">
        <h2 class="block-title">Title</h2>
        <span class="block-stats"><a href="" class="author-link">Category</a> Date</span>
     </div>
</div>
</div>

---

这里是一个演示：

一个选项是添加到元素

。block about

在执行此操作时，基本上可以单击元素：

可以使用浏览器支持

指针事件

属性

---

另一种选择是移动锚元素，然后相对于父元素绝对定位它，以获取完整尺寸

您需要在DOM中移动锚点元素的原因是，如果它包装

img

元素，那么您就不能让背景在底部褪色，因为锚点需要定位在其上方，以便单击事件在元素中的任何位置都能工作

---

非常感谢，但是IE10（可能是IE9）还有其他选择吗？

.view-full-module { cursor: pointer; top: 0px; left: 0px; z-index: 2; background: none repeat scroll 0% 0% rgba(31, 32, 33, 0); width: 100%; height: 100%; }
.image { width: 100%; }
.block-module { width: 100%; position:relative; margin:0; padding:0; cursor:pointer; border-radius:10px; z-index:4; }
.block-about { position:absolute; bottom:0; left:0; right:0; padding:4em 1em 1em 1em; background-image:-webkit-linear-gradient(transparent, rgba(0,0,0,0.55), rgba(0,0,0,0.8)); background-image:linear-gradient(transparent, rgba(0,0,0,0.55), rgba(0,0,0,0.8)); }
.block-about a { position:relative; z-index:5; }
.block-title { max-width:100%; margin:0 0 0; color: white !important;font-size:1.625em; }
.block-stats { width:100%; margin-top:0.35714em; font-size:0.875em; color:rgba(255,255,255,0.55) !important; }
.author-link { color:#659dae; }
#article { top:0; margin: 0; padding:20px; -moz-column-gap: 20px; -webkit-column-gap: 20px; column-gap: 20px; -moz-column-width: 260px; -webkit-column-width: 260px; column-width: 260px; }

.block-about {
    pointer-events: none;
}

.view-full-module {
    cursor: pointer;
    position: absolute;
    top: 0; right: 0;
    bottom: 0; left: 0;
    z-index: 2;
}

<div id="article">
    <div class="block-module">
        <img class="image" src="http://www.cosmos.com/Common/Images/Destinations/machupicchu3.jpg" />
        <div class="block-about">
             <h2 class="block-title">Title</h2>
 <span class="block-stats"><a href="" class="author-link">Category</a> Date</span>

        </div>
        <a class="view-full-module" href="http://www.cosmos.com/Common/Images/Destinations/machupicchu3.jpg"></a>
    </div>
</div>

img {
    vertical-align: top;
}