Question

希望对CSS问题提出一些建议 - 我有一个布局，我绝对将链接文本定位在背景图像上方，但无法将链接扩展到容器的高度（在IEx中，在Chrome中工作正常））

<div>
    <img />
    <a />            
</div>

包含div具有背景颜色，并且图像的不透明度降低 - 在悬停图像时，不透明度进一步降低，泄漏更多背景颜色。同时，链接的不透明度从0变为100.我也使用了一些CSS过渡，只是为了美化它。

我知道定位链接绝对会将其从流程中移除，因此将高度设置为100％将无法正常工作，但我不应该能够明确设置它吗？这样做适用于Chrome但不适用于IE。问题与图像有关，因为如果链接被删除，链接就会正常运行。

示例：http：//jsfiddle.net/thSCJ/8/（包括足够的细节以突出我的问题。在IE中，悬停在图像的左上角显示链接。在Chrome中，任何悬停在图像上显示链接）。

有什么建议吗？

Answer 1

您需要包含图片和文字的<a>标记：

<a href="#">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR6kpJ562NTt7Vkya4ocQ3Aq7mVqNB04ccB9XNCr-b4mPdYU6Y5Yg" width=200 height=200/>
    <span>Link text</span>
</a>

这是CSS：

a {
    width:200px;
    height:200px;
    background:#cccccc;
}

a:hover > span {
    display: inline;
}

span {
    display: none;
    position:absolute;
    top:0;
    left:0;
    width:200px;
    height:200px;
    color:red;      
}

小提琴：http://jsfiddle.net/thSCJ/12/

Answer 2

不是更改不透明度，只需更改font-size属性并将整个内容放在<a>标记中。

See this JSFiddle.

设置绝对定位链接的高度显示：块

2 个答案: