在网页上,我有一个缩略图列表,上面有链接框。它们被链接标签包裹并且可以点击。然而,在它们顶部的链接框中,背景略微透明,只有文本而不是整个框是可点击的。
这是一组缩略图和链接框的 HTML 代码:
<article class="recent-post-item">
<h2>
<a href="link/to/somewhere" title="Permanent link to Something">Something</a>
</h2>
<a href="link/to/somewhere" title="Something" class="thumb">
<img src="someimage.png" alt="Something" width="248" height="125" />
</a>
</article>
这是相应的样式表:
#column-2 .recent-post-item {
height: 127px;
width: 250px;
position: relative;
border: none;
}
#column-2 .thumb {
margin: 0;
position: absolute;
top: 0px;
left: 0px;
}
#column-2 h2 {
font-size: 22px;
background-color:rgba(255,255,255,0.6);
padding: 5px 4px;
margin: 0;
position: absolute;
z-index: 1;
bottom: 1px;
left: 1px;
right: 1px;
}
这是一个显示问题的工作站点:http://fuckthepony.dk/wordpress/ (我说的缩略图是中间那一栏的)
有些人告诉我他们没有遇到这个问题。我已经在 Linux 上使用 Opera、Chrome 和 Firefox 进行了测试,这个问题在所有这些浏览器中都存在。
最佳答案
我同意上面的评论,但要使整个透明 block 可点击,您还需要取消 h2 的填充并将填充添加到 a 标签。
#column-2 h2 {
padding: 0;
}
#column-2 h2 a {
display: block;
padding: 5px 4px;
}
关于html - 只有链接框中的文本是可点击的,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10740406/