Question

有一个嵌套在<a>标签中的图片，还有一些文字（标题和说明）：

<figure class="post-image">
            <a href="#">
                <img src="http://example.com/book.jpg">
            </a>

            <figcaption>
                <span>This is the title</span>
                <p>This is the paragraph.</p>
            </figcaption>
</figure>

figcaption{
    bottom: 0;
    left: 0;
    position: absolute;
    top: 0;
    font-size:20px;
} 
figure{
    position:relative
}

问题是嵌套在<span>和<p>标记中的文字会占据<a>标记的点击区域。

这是小提琴：http://jsfiddle.net/Mhyan/1/

Answer 1

您可以在绝对定位的<figcaption>上使用pointer-events: none;，以防止它成为鼠标事件的目标。

<强> Example Here

figcaption {
    /* other styles here... */
    pointer-events: none;
}

这种行为就像你只是悬停有图像的锚标签一样。

值得注意的是pointer-events属性is supported in IE9+。但是有一个polyfill。

或者，您可以通过anchor标记包装<figcaption>以包含嵌套元素。（的 Example Here ）。

但在这种情况下，您可能需要设置包含段落/ span的锚标记的样式以充当普通文本。（的 Updated Example ）。

.post-image a, .post-image a:visited, .post-image a:hover, .post-image a:active { color: black; }

Answer 2

         <figure class="post-image">
         <a href="#">
            <img src="http://example.com/book.jpg">
            <figcaption>
               <span>This is the title</span>
               <p>This is the paragraph.</p>
           </figcaption>
         </a>
         </figure>

试试以上代码..

Answer 3

figcaption有一个position:absolute，可将此部分放在a标记的顶部。尝试删除它。

图像上的文本占据链接点击区域

3 个答案: