html - 尽管其中一部分已经有另一个链接，如何在整个图片上激活一个链接？

Question

我有一个磁贴，其中包含标题、类别、类别链接、图片和图片的全局链接。事实上，这个全局链接只在一个图片区域有效。我希望它是全局性的。

这是 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>

这是 CSS:

.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; }

这是一个演示:http://jsfiddle.net/5qwejk20/4/

Answer 1

一个选项是添加 pointer-events: none到元素 .block-about。

在这样做时，您实际上可以通过元素单击:

Updated Example

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

浏览器对 pointer-events 属性的支持可以是 found here .

---

另一种选择是移动 anchor 元素，然后将其绝对定位到父元素相对，以便采用完整尺寸。

您需要在 DOM 中移动 anchor 元素的原因是，如果它包裹了 img 元素，那么您就不能让背景在底部淡出，因为 anchor 需要定位在它之上，以便点击事件在元素内的任何位置起作用。

Updated Example

.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>

---

作为旁注，您可能需要将 vertical-align: top 添加到 img 元素以消除其下方的间隙。

Example without the gap

img {
    vertical-align: top;
}